alex4cip Claude commited on
Commit
27061cd
Β·
1 Parent(s): 6612ab5

feat: Center-align submit button with input field

Browse files

UI 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>

Files changed (1) hide show
  1. app.py +15 -3
app.py CHANGED
@@ -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