Spaces:
Sleeping
feat: Center-align submit button with input field
Browse filesUI Improvement:
- Add vertical center alignment for submit button
- Button now aligns with middle of input field
- Better visual balance and user experience
Changes:
1. Add custom CSS for .input-row class
- align-items: center for vertical centering
- height: 100% for button to match input height
- min-height: 42px for minimum button height
2. Update gr.Row with elem_classes="input-row"
- Applies custom CSS styling
3. Add container=False to Textbox
- Removes extra padding for cleaner look
4. Add min_width=80 to Button
- Ensures button has consistent minimum width
Visual Result:
- Before: Button aligned to top of input field
- After: Button vertically centered with input field
- Matches reference image provided by user
π€ Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
|
@@ -465,8 +465,19 @@ def chat_wrapper(message, history):
|
|
| 465 |
|
| 466 |
print(f"β
App initialized - {HW_ENV['description']}")
|
| 467 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 468 |
# Create Gradio interface
|
| 469 |
-
with gr.Blocks(title="π€ Multi-Model Chatbot") as demo:
|
| 470 |
# Dynamic header based on hardware environment
|
| 471 |
header = f"""
|
| 472 |
# π€ λ€μ€ λͺ¨λΈ μ±λ΄ {HW_ENV['description']}
|
|
@@ -533,13 +544,14 @@ with gr.Blocks(title="π€ Multi-Model Chatbot") as demo:
|
|
| 533 |
|
| 534 |
chatbot = gr.Chatbot(height=400, type="messages", show_label=False)
|
| 535 |
|
| 536 |
-
with gr.Row():
|
| 537 |
msg = gr.Textbox(
|
| 538 |
placeholder="νκΈλ‘ λ©μμ§λ₯Ό μ
λ ₯νμΈμ...",
|
| 539 |
show_label=False,
|
| 540 |
scale=9,
|
|
|
|
| 541 |
)
|
| 542 |
-
btn = gr.Button("μ μ‘", scale=1, variant="primary")
|
| 543 |
|
| 544 |
clear = gr.Button("ποΈ λν μ΄κΈ°ν", size="sm")
|
| 545 |
|
|
|
|
| 465 |
|
| 466 |
print(f"β
App initialized - {HW_ENV['description']}")
|
| 467 |
|
| 468 |
+
# Custom CSS for button alignment
|
| 469 |
+
custom_css = """
|
| 470 |
+
.input-row {
|
| 471 |
+
align-items: center !important;
|
| 472 |
+
}
|
| 473 |
+
.input-row > div:last-child button {
|
| 474 |
+
height: 100% !important;
|
| 475 |
+
min-height: 42px !important;
|
| 476 |
+
}
|
| 477 |
+
"""
|
| 478 |
+
|
| 479 |
# Create Gradio interface
|
| 480 |
+
with gr.Blocks(title="π€ Multi-Model Chatbot", css=custom_css) as demo:
|
| 481 |
# Dynamic header based on hardware environment
|
| 482 |
header = f"""
|
| 483 |
# π€ λ€μ€ λͺ¨λΈ μ±λ΄ {HW_ENV['description']}
|
|
|
|
| 544 |
|
| 545 |
chatbot = gr.Chatbot(height=400, type="messages", show_label=False)
|
| 546 |
|
| 547 |
+
with gr.Row(elem_classes="input-row"):
|
| 548 |
msg = gr.Textbox(
|
| 549 |
placeholder="νκΈλ‘ λ©μμ§λ₯Ό μ
λ ₯νμΈμ...",
|
| 550 |
show_label=False,
|
| 551 |
scale=9,
|
| 552 |
+
container=False,
|
| 553 |
)
|
| 554 |
+
btn = gr.Button("μ μ‘", scale=1, variant="primary", min_width=80)
|
| 555 |
|
| 556 |
clear = gr.Button("ποΈ λν μ΄κΈ°ν", size="sm")
|
| 557 |
|