Update app.py

app.py

@@ -1743,6 +1743,70 @@ html, body {
   }
 }
 
+
+
+
+/* =========================================================
+   ML MODELING DROPDOWN POPUP FIX
+   ========================================================= */
+
+/* Do not clip dropdown menus inside the glass/tabs layout. */
+.app-panel,
+#main-tabs,
+.tab-body {
+  overflow: visible !important;
+}
+
+/* Keep the active dropdown above neighboring cards/components. */
+#target-dropdown,
+#problem-type-dropdown,
+#algorithm-dropdown {
+  position: relative !important;
+  overflow: visible !important;
+}
+
+#target-dropdown:focus-within,
+#problem-type-dropdown:focus-within,
+#algorithm-dropdown:focus-within {
+  z-index: 2147483000 !important;
+}
+
+/* Gradio renders the open option menu as <ul class="options">. */
+#target-dropdown ul.options,
+#problem-type-dropdown ul.options,
+#algorithm-dropdown ul.options {
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  pointer-events: auto !important;
+  z-index: 2147483647 !important;
+  overflow-y: auto !important;
+  max-height: 320px !important;
+  background: #17101d !important;
+  border: 1px solid rgba(255, 95, 135, .28) !important;
+  border-radius: 12px !important;
+  box-shadow: 0 18px 50px rgba(0, 0, 0, .55) !important;
+}
+
+/* Ensure individual choices remain visible and clickable. */
+#target-dropdown li[data-testid="dropdown-option"],
+#problem-type-dropdown li[data-testid="dropdown-option"],
+#algorithm-dropdown li[data-testid="dropdown-option"] {
+  display: block !important;
+  visibility: visible !important;
+  opacity: 1 !important;
+  pointer-events: auto !important;
+  cursor: pointer !important;
+  color: #fff7fa !important;
+  background: #17101d !important;
+}
+
+#target-dropdown li[data-testid="dropdown-option"]:hover,
+#problem-type-dropdown li[data-testid="dropdown-option"]:hover,
+#algorithm-dropdown li[data-testid="dropdown-option"]:hover {
+  background: rgba(255, 95, 135, .12) !important;
+}
+
 '''
 
 
@@ -1830,18 +1894,20 @@ def build_app():
                         # Builds the modeling tab for target selection, training, comparison, and pipeline generation
                         with gr.Tab("02. ML Modeling", id="model-lab"):
                             with gr.Column(elem_classes=["tab-body"]):
-                                gr.HTML('''<div class="section-head"><div class="section-kicker">Supervised Learning</div><h2>Choose a Target (dependent variable), Algorithm, and Evaluation Setup</h2><p>Build a preprocessing + model pipeline, evaluate it on a holdout split, compare baselines, and inspect generated code.</p></div>''')
+                                gr.HTML('''<div class="section-head"><div class="section-kicker">Supervised Learning</div><h2>Choose a Target, Algorithm, and Evaluation Setup</h2><p>Build a preprocessing + model pipeline, evaluate it on a holdout split, compare baselines, and inspect generated code.</p></div>''')
 
                                 # Groups the target, problem-type, and algorithm selectors on a single modeling row
                                 with gr.Row():
-                                    target = gr.Dropdown(label="Target column", choices=[], value=None, interactive=True)
+                                    target = gr.Dropdown(label="Target column", choices=[], value=None, interactive=True, filterable=True, elem_id="target-dropdown")
                                     problem_type = gr.Dropdown(
                                         label="Problem type",
                                         choices=["Auto", "classification", "regression"],
                                         value="Auto",
                                         interactive=True,
+                                        filterable=True,
+                                        elem_id="problem-type-dropdown",
                                     )
-                                    algorithm = gr.Dropdown(label="Algorithm", choices=ALL_ALGORITHMS, value="Auto", interactive=True)
+                                    algorithm = gr.Dropdown(label="Algorithm", choices=ALL_ALGORITHMS, value="Auto", interactive=True, filterable=True, elem_id="algorithm-dropdown")
 
                                 # Configures the holdout-size control used by training, comparison, and code generation
                                 test_size = gr.Slider(0.1, 0.4, value=0.2, step=0.05, label="Holdout test size")
@@ -1943,11 +2009,11 @@ def build_app():
 
         # Keep the algorithm picker and generated pipeline aligned to the selected target
         # Synchronizes model choices and generated pipeline code whenever the target selection changes
-        target.change(sync_model_controls, [target, problem_type, algorithm, sid], [algorithm, pipeline_code, diagnostics])
+        target.input(sync_model_controls, [target, problem_type, algorithm, sid], [algorithm, pipeline_code, diagnostics])
         # Synchronizes model choices and generated pipeline code whenever the problem type changes
-        problem_type.change(sync_model_controls, [target, problem_type, algorithm, sid], [algorithm, pipeline_code, diagnostics])
+        problem_type.input(sync_model_controls, [target, problem_type, algorithm, sid], [algorithm, pipeline_code, diagnostics])
         # Regenerates pipeline code whenever the selected algorithm changes
-        algorithm.change(generate_pipeline_code, [target, algorithm, problem_type, test_size, sid], [pipeline_code])
+        algorithm.input(generate_pipeline_code, [target, algorithm, problem_type, test_size, sid], [pipeline_code])
         # Regenerates pipeline code whenever the holdout split size changes
         test_size.change(generate_pipeline_code, [target, algorithm, problem_type, test_size, sid], [pipeline_code])