fixed buttons

app.py

@@ -1834,17 +1834,48 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
         .gradio-container .block-label { font-size: 1rem !important; }
 
         /* Button sizing and layout: single-row compact triple buttons */
-        #buttons_row { display: flex !important; gap: 6px !important; flex-wrap: nowrap !important; align-items: center !important; }
-        #btn_send, #btn_clear, #btn_sources, #btn_search { display: inline-flex !important; width: 33% !important; flex: 0 0 auto !important; }
-        #btn_send > button, #btn_clear > button, #btn_sources > button, #btn_search > button,
-        #btn_send button, #btn_clear button, #btn_sources button, #btn_search button {
-            font-size: 0.95rem !important;
-            padding: 6px 10px !important;
-            width: auto !important;
-            min-width: 40px !important;
-            max-width: 80px !important;
-            white-space: nowrap !important;
-            line-height: 1.2 !important;
+        /* --- Responsive composer that matches chat width --- */
+        #composer_row {
+        display: flex;
+        flex-wrap: wrap;      /* allow wrapping on small screens */
+        gap: 8px;
+        align-items: stretch;
+        }
+
+        /* Let the input and the controls share the row and wrap when needed */
+        #composer_input { flex: 1 1 480px; min-width: 0; }
+        #controls_col  { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+        
+        /* 2×2 grid; only this gap applies */
+        #buttons_grid {
+        display: grid !important;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 6px;                 /* ← your only spacing */
+        margin: 0 !important;     /* no extra vertical space */
+        padding: 0 !important;
+        }
+        #buttons_grid button { width: 100%; }
+
+        /* Two equal-width buttons per row; allow them to shrink and wrap text if needed */
+        #buttons_row_top,
+        #buttons_row_bottom {
+        display: flex;
+        gap: 6px;
+        }
+
+        #buttons_row_top > *,
+        #buttons_row_bottom > * {
+        flex: 1 1 0;   /* equal widths without hard max-widths */
+        min-width: 0;  /* allow shrinking instead of overflowing */
+        }
+
+        /* Make the actual <button> fill its component's width */
+        #controls_col button { width: 100%; }
+
+        /* On narrow screens, stack input above the controls so nothing overflows */
+        @media (max-width: 820px) {
+        #composer_input,
+        #controls_col { flex-basis: 100% !important; }
         }
 
         /* Expand center chat area and compact Sources sidebar bubbles */
@@ -1908,15 +1939,14 @@ with gr.Blocks(theme=gr.themes.Soft()) as demo:
     with gr.Row():
         with gr.Column(elem_id="right_col"):
             chatbot = gr.Chatbot(label="Chat", type="messages", height=520, elem_id="main_chat", autoscroll=False)
-            with gr.Row():
-                user_input = gr.Textbox(label="User Input", placeholder="Ask a web question…", lines=1, scale=4)
-                with gr.Column(scale=2, min_width=50):
-                    with gr.Row(elem_id="buttons_row"):
-                        submit_button = gr.Button("Send", variant="primary", scale=1, elem_id="btn_send")
-                        clear_button = gr.Button("Clear", scale=1, elem_id="btn_clear")
-                    with gr.Row(elem_id="buttons_row"):
-                        search_button = gr.Button("DeepResearch ON", variant="huggingface", scale=1, elem_id="btn_search")
-                        sources_button = gr.Button("Sources", scale=1, elem_id="btn_sources")
+            with gr.Row(elem_id="composer_row", equal_height=True):
+                user_input = gr.Textbox(label="User Input", placeholder="Ask a web question…", lines=1, scale=5, min_width=280, elem_id="composer_input")
+                with gr.Column(scale=2, min_width=220):
+                    with gr.Row(elem_id="buttons_grid"):   # one container
+                        submit_button  = gr.Button("Send", variant="primary")
+                        clear_button   = gr.Button("Clear")
+                        search_button  = gr.Button("DeepResearch ON", variant="huggingface")
+                        sources_button = gr.Button("Sources")
 
             gr.Markdown("### Example questions")
             with gr.Row():