Fix UI: Reduce dialog size and prevent input focus layout shifts

- Reduce chatbot height from 600px to 400px for better screen usage
- Add CSS to prevent textarea resize and layout shifts on focus
- Set fixed heights instead of viewport-based heights for consistency
- Improve textbox behavior with max-lines and autofocus settings
- Add responsive design with fixed heights for larger screens

gradio_app.py

@@ -269,8 +269,9 @@ css = """
     padding: 20px !important;
 }
 #chatbot {
-    height: 70vh !important;
-    min-height: 600px !important;
+    height: 400px !important;
+    max-height: 400px !important;
+    min-height: 400px !important;
     overflow-y: auto !important;
     border-radius: 12px !important;
     border: 1px solid #e0e0e0 !important;
@@ -299,13 +300,31 @@ css = """
 .gr-textbox {
     border-radius: 8px !important;
 }
+
+/* Prevent textbox from affecting layout */
+.gradio-textbox textarea {
+    resize: none !important;
+    max-height: 120px !important;
+    min-height: 40px !important;
+}
+
+/* Prevent layout shifts on focus */
+.gradio-container .wrap {
+    min-height: auto !important;
+}
+
+/* Stable row heights */
+.gradio-row {
+    min-height: auto !important;
+}
 /* Responsive design for different screen sizes */
 @media (min-width: 1400px) {
     .gradio-container {
         padding: 40px !important;
     }
     #chatbot {
-        height: 75vh !important;
+        height: 450px !important;
+        max-height: 450px !important;
     }
 }
 @media (min-width: 1800px) {
@@ -313,7 +332,8 @@ css = """
         padding: 60px !important;
     }
     #chatbot {
-        height: 80vh !important;
+        height: 500px !important;
+        max-height: 500px !important;
     }
 }
 """
@@ -343,9 +363,11 @@ with gr.Blocks(css=css, title="Llama Chat", theme=gr.themes.Soft()) as demo:
         avatar_images=(None, None),
         show_share_button=False,
         type="messages",  # Use new message format
-        height=600,
+        height=400,  # Reduced from 600 to 400
         render_markdown=True,
-        show_copy_button=True
+        show_copy_button=True,
+        container=True,
+        scale=1
     )
     
     with gr.Row():
@@ -353,7 +375,11 @@ with gr.Blocks(css=css, title="Llama Chat", theme=gr.themes.Soft()) as demo:
             msg = gr.Textbox(
                 placeholder="Type your message here...",
                 show_label=False,
-                container=False
+                container=False,
+                lines=1,
+                max_lines=3,
+                autofocus=False,
+                interactive=True
             )
         with gr.Column(scale=1):
             submit_btn = gr.Button("Send", variant="primary")