Update ui.py

ui.py

@@ -41,6 +41,8 @@ def create_interface(agent):
     with gr.Blocks(
         title=APP_TITLE,
         theme=gr.themes.Soft(),
+        # Add viewport meta tag for better mobile/iframe handling
+        head="""<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">""",
         css="""
         /* Theme tokens */
         .gradio-container {
@@ -55,6 +57,23 @@ def create_interface(agent):
             --bot-accent: #06b6d4;
             --bot-accent-2: #3b82f6;
         }
+        
+        /* Critical HF Spaces fixes - Force proper container behavior */
+        .gradio-container,
+        .gradio-container > *,
+        body {
+            max-width: 100% !important;
+            width: 100% !important;
+            overflow-x: hidden !important;
+        }
+        
+        /* Force iframe content to be scrollable */
+        #root,
+        .gradio-container {
+            position: relative !important;
+            min-height: 100vh !important;
+            max-height: none !important;
+        }
 
         /* App background */
         .gradio-container {
@@ -76,13 +95,16 @@ def create_interface(agent):
         .header h1 { margin: 0; font-size: 1.4rem; font-weight: 600; }
         .header p { margin: .5rem 0 0 0; color: rgba(255,255,255,0.9); font-size: .95rem; }
 
-        /* Chat container */
+        /* Chat container - flexible height for HF Spaces */
         .chat-container {
-            height: 500px !important;
+            min-height: 400px !important;
+            max-height: 600px !important;
+            height: auto !important;
             background: var(--panel) !important;
             border-radius: 16px !important;
             border: 1px solid var(--border) !important;
             box-shadow: 0 2px 12px rgba(0,0,0,.35) !important;
+            overflow-y: auto !important;
         }
 
         /* Message row alignment */
@@ -348,10 +370,43 @@ def create_interface(agent):
             background: var(--muted);
         }
 
+        /* Hugging Face Spaces specific fixes */
+        .gradio-container {
+            min-height: 100vh !important;
+            overflow-y: auto !important;
+        }
+        
+        /* Fix for HF iframe container */
+        body, html {
+            height: auto !important;
+            min-height: 100% !important;
+            overflow-x: hidden !important;
+            overflow-y: auto !important;
+        }
+        
+        /* Ensure proper scrolling in tabs - Critical for HF Spaces */
+        .gradio-container .tabitem,
+        .gradio-container [role="tabpanel"] {
+            min-height: calc(100vh - 150px) !important;
+            max-height: none !important;
+            height: auto !important;
+            overflow-y: visible !important;
+            overflow-x: hidden !important;
+            position: relative !important;
+        }
+        
+        /* Make sure tab content can expand */
+        .gradio-container .tabs,
+        .gradio-container [role="tablist"] + div {
+            height: auto !important;
+            min-height: 100% !important;
+        }
+
         /* Responsive */
         @media (max-width: 768px) {
             .chat-container {
-                height: 250px !important;
+                min-height: 300px !important;
+                max-height: 400px !important;
             }
             
             .gradio-container [data-testid="bot"] .message > *,
@@ -388,11 +443,12 @@ def create_interface(agent):
         # Main Chat Tab
         with gr.Tab("💬 Chat with Agent"):
             chatbot = gr.Chatbot(
-                height=250,
+                height=None,  
                 show_label=False,
                 bubble_full_width=False,
                 type='messages',
-                elem_classes=["chat-container"]
+                elem_classes=["chat-container"],
+                container=True  
             )
             
             # Clear chat button