fix scrolling

app.py

@@ -111,12 +111,8 @@ def get_table_info(table_name):
 
     return info
 
-# Generate CSS with custom column widths
-def generate_css():
-    """Generate CSS with custom column widths based on column_widths config"""
-
-    # Base CSS
-    base_css = """
+# Create Gradio interface with CSS
+css = """
     /* Default table cell styling */
     table td,
     table th {
@@ -129,14 +125,22 @@ def generate_css():
         padding: 4px 8px !important;
     }
 
-    /* Make table container scrollable */
-    .dataframe,
-    .table-wrap,
-    div[data-testid="data-table"] {
+    /* Make ONLY the table container scrollable, not parent divs */
+    .dataframe {
+        max-height: 600px !important;
+        overflow: auto !important;
+    }
+
+    .table-wrap {
         max-height: 600px !important;
         overflow: auto !important;
     }
 
+    /* Remove overflow from parent containers */
+    div[data-testid="data-table"] {
+        overflow: visible !important;
+    }
+
     /* Ensure table uses fixed layout */
     table {
         table-layout: fixed !important;
@@ -152,29 +156,6 @@ def generate_css():
     }
 """
 
-    # Add custom column widths using nth-child selectors
-    custom_css = ""
-    if table_data and table_names:
-        for table_name in table_names:
-            if table_name in table_data:
-                df = table_data[table_name]
-                for idx, col_name in enumerate(df.columns):
-                    if col_name in column_widths:
-                        width = column_widths[col_name]
-                        # nth-child is 1-indexed
-                        custom_css += f"""
-    table td:nth-child({idx + 1}),
-    table th:nth-child({idx + 1}) {{
-        width: {width}px !important;
-        min-width: {width}px !important;
-        max-width: {width}px !important;
-    }}
-"""
-
-    return base_css + custom_css
-
-css = generate_css()
-
 with gr.Blocks(title="VLA Foundry Database Viewer", css=css) as demo:
     gr.Markdown("# 🤖 VLA Foundry Database Viewer")
     gr.Markdown("Explore the VLA Foundry database with searchable, filterable, and sortable tables.")
@@ -223,12 +204,21 @@ with gr.Blocks(title="VLA Foundry Database Viewer", css=css) as demo:
             )
             clear_btn = gr.Button("Clear Filters", scale=1)
 
-        # Data table
+        # Data table with custom column widths
+        initial_df = table_data[table_names[0]] if table_names else pd.DataFrame()
+
+        # Build column_widths list based on the column_widths config
+        col_width_list = []
+        if not initial_df.empty:
+            for col in initial_df.columns:
+                col_width_list.append(column_widths.get(col, 300))
+
         data_table = gr.Dataframe(
-            value=table_data[table_names[0]] if table_names else pd.DataFrame(),
+            value=initial_df,
             label="Table Data",
             interactive=True,
-            wrap=False
+            wrap=False,
+            column_widths=col_width_list if col_width_list else None
         )
 
         # Event handlers