Update app.py

app.py

@@ -428,6 +428,54 @@ def create_ui():
         box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
     }
 
+    /* Fix dropdown visibility issues */
+    .gr-dropdown {
+        position: relative !important;
+        z-index: 999 !important;
+    }
+
+    .gr-dropdown-container {
+        position: relative !important;
+        overflow: visible !important;
+    }
+
+    .gr-dropdown .gr-dropdown-list {
+        position: absolute !important;
+        z-index: 1000 !important;
+        background: white !important;
+        border: 1px solid #e0e0e0 !important;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
+        max-height: 300px !important;
+        overflow-y: auto !important;
+    }
+
+    /* Ensure parent containers don't clip dropdown */
+    .gr-form, .gr-box, .gr-group {
+        overflow: visible !important;
+    }
+
+    .template-selector {
+        position: relative !important;
+        z-index: 100 !important;
+    }
+
+    /* Main content area fix */
+    .main-content {
+        overflow: visible !important;
+        position: relative;
+        z-index: 1;
+    }
+
+    .input-column {
+        overflow: visible !important;
+        position: relative;
+    }
+
+    /* Global overflow fix for dropdown visibility */
+    .gr-panel {
+        overflow: visible !important;
+    }
+
     /* Header styling */
     .header-container {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
@@ -632,9 +680,9 @@ def create_ui():
             </div>
         """)
 
-        # Main UI section
-        with gr.Row():
-            with gr.Column(scale=2):
+        # Main UI section with fixed overflow
+        with gr.Row(elem_classes=["main-content"]):
+            with gr.Column(scale=2, elem_classes=["input-column"]):
                 # Template selection with visual cards
                 gr.Markdown("### 🎯 Choose Your Template")
                 
@@ -650,9 +698,10 @@ def create_ui():
                     choices=available_templates,
                     value=default_template,
                     info="Select a predefined template to get started quickly",
-                    elem_classes=["template-selector"],
                     interactive=True,
-                    visible=True
+                    visible=True,
+                    container=True,
+                    scale=1
                 )
 
                 # Template description with enhanced styling