Update app.py

app.py

@@ -2169,385 +2169,11 @@ ul.options[role="listbox"] {
   }
 }
 
-
-/* =========================================================
-   FINAL CROSS-DISPLAY / LAPTOP RESPONSIVE OVERRIDES
-   Keep controls readable on Windows PCs and macOS laptops,
-   prevent label overflow, and normalize tab/button typography.
-   This block intentionally comes last so it wins over older
-   incremental styling rules above.
-   ========================================================= */
-
-html,
-body,
-.gradio-container {
-  width: 100% !important;
-  min-width: 0 !important;
-}
-
-html,
-body {
-  overflow-x: hidden !important;
-  text-size-adjust: 100%;
-  -webkit-text-size-adjust: 100%;
-}
-
-.main-shell {
-  width: 100% !important;
-  max-width: 100% !important;
-  padding-left: clamp(14px, 2vw, 30px) !important;
-  padding-right: clamp(14px, 2vw, 30px) !important;
-}
-
-/* The main workspace may shrink without forcing horizontal page overflow. */
-#workspace-row {
-  width: 100% !important;
-  max-width: 100% !important;
-  gap: clamp(18px, 2vw, 28px) !important;
-  align-items: flex-start !important;
-}
-
-#workspace-row > * {
-  min-width: 0 !important;
-}
-
-.app-panel,
-.side-column,
-.tab-body,
-.model-controls-row,
-.model-action-row,
-#dataset-actions-row {
-  min-width: 0 !important;
-  max-width: 100% !important;
-}
-
-/* Normalize the type size used by user-facing action buttons. */
-#load-button,
-#example-button,
-#clear-button,
-#train-button,
-#compare-button,
-#code-button,
-#agent-button,
-#load-button button,
-#example-button button,
-#clear-button button,
-#train-button button,
-#compare-button button,
-#code-button button,
-#agent-button button {
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
-  font-size: clamp(13px, .9vw, 15px) !important;
-  font-weight: 800 !important;
-  line-height: 1.25 !important;
-  letter-spacing: 0 !important;
-  white-space: normal !important;
-  overflow-wrap: break-word !important;
-  word-break: normal !important;
-  text-align: center !important;
-}
-
-#load-button,
-#example-button,
-#clear-button,
-#train-button,
-#compare-button,
-#code-button,
-#agent-button {
-  min-height: 52px !important;
-  height: auto !important;
-  max-height: none !important;
-  padding-top: 11px !important;
-  padding-bottom: 11px !important;
-}
-
-/* 01 / 02 / 03 primary navigation. */
-.app-panel {
-  padding-top: 16px !important;
-}
-
-#main-tabs {
-  width: 100% !important;
-  min-width: 0 !important;
-}
-
-#main-tabs [role="tablist"] {
-  display: grid !important;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr) !important;
-  gap: clamp(12px, 1.25vw, 18px) !important;
-  width: calc(100% - 28px) !important;
-  max-width: calc(100% - 28px) !important;
-  min-height: 0 !important;
-  margin: 0 14px !important;
-  padding: 10px !important;
-  align-items: stretch !important;
-  overflow: visible !important;
-  border: 1px solid rgba(255,255,255,.075) !important;
-  border-radius: 18px !important;
-  background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.010)) !important;
-}
-
-#main-tabs button[role="tab"] {
-  width: 100% !important;
-  min-width: 0 !important;
-  max-width: none !important;
-  min-height: 58px !important;
-  height: auto !important;
-  max-height: none !important;
-  margin: 0 !important;
-  padding: 12px 14px !important;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
-  font-size: clamp(13px, .9vw, 15px) !important;
-  font-weight: 800 !important;
-  line-height: 1.28 !important;
-  letter-spacing: 0 !important;
-  white-space: normal !important;
-  overflow-wrap: normal !important;
-  word-break: normal !important;
-  text-align: center !important;
-}
-
-#main-tabs button[role="tab"] * {
-  font-size: inherit !important;
-  font-weight: inherit !important;
-  line-height: inherit !important;
-  letter-spacing: inherit !important;
-  white-space: inherit !important;
-}
-
-/* Recommended Pipeline / Tool Trace tabs. */
-#agent-result-tabs {
-  width: 100% !important;
-  min-width: 0 !important;
-  margin-top: 18px !important;
-}
-
-#agent-result-tabs [role="tablist"] {
-  display: grid !important;
-  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-  gap: clamp(14px, 1.5vw, 20px) !important;
-  width: 100% !important;
-  margin: 0 !important;
-  padding: 8px !important;
-  border: 1px solid rgba(255,255,255,.07) !important;
-  border-radius: 16px !important;
-  background: rgba(255,255,255,.016) !important;
-}
-
-#agent-result-tabs button[role="tab"] {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  width: 100% !important;
-  min-width: 0 !important;
-  max-width: none !important;
-  min-height: 52px !important;
-  height: auto !important;
-  margin: 0 !important;
-  padding: 12px 16px !important;
-  border-radius: 12px !important;
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
-  font-size: clamp(13px, .9vw, 15px) !important;
-  font-weight: 800 !important;
-  line-height: 1.25 !important;
-  letter-spacing: 0 !important;
-  white-space: normal !important;
-  overflow-wrap: normal !important;
-  word-break: normal !important;
-  text-align: center !important;
-}
-
-#agent-result-tabs button[role="tab"] * {
-  font-size: inherit !important;
-  font-weight: inherit !important;
-  line-height: inherit !important;
-}
-
-/* Dataset and model action rows keep equal sizing without clipping labels. */
-#dataset-actions-row,
-.model-action-row {
-  width: 100% !important;
-  display: flex !important;
-  flex-wrap: nowrap !important;
-  gap: clamp(10px, 1.2vw, 16px) !important;
-  align-items: stretch !important;
-}
-
-#dataset-actions-row > *,
-.model-action-row > * {
-  flex: 1 1 0 !important;
-  min-width: 0 !important;
-  max-width: none !important;
-}
-
-#dataset-actions-row #load-button,
-#dataset-actions-row #example-button,
-#dataset-actions-row #clear-button,
-.model-action-row #train-button,
-.model-action-row #compare-button,
-.model-action-row #code-button {
-  width: 100% !important;
-  min-height: 56px !important;
-  height: auto !important;
-  max-height: none !important;
-  margin: 0 !important;
-}
-
-/* Let model selectors wrap before they become cramped. */
-.model-controls-row {
-  width: 100% !important;
-  display: flex !important;
-  flex-wrap: wrap !important;
-  gap: 14px !important;
-  align-items: flex-start !important;
-}
-
-.model-controls-row > * {
-  flex: 1 1 220px !important;
-  min-width: min(220px, 100%) !important;
-  max-width: 100% !important;
-}
-
-/* Long decorative copy should never push outside its card. */
-.eyebrow,
-.badge,
-.workflow-step,
-.hero-signal,
-.sidebar-card,
-.metric-chip {
-  max-width: 100% !important;
-}
-
-.eyebrow,
-.workflow-step strong,
-.workflow-step small,
-.hero-signal strong,
-.sidebar-card,
-.runtime-line strong {
-  overflow-wrap: break-word !important;
-  word-break: normal !important;
-}
-
-.eyebrow {
-  flex-wrap: wrap !important;
-  line-height: 1.45 !important;
-}
-
-/* Normal laptop widths: retain the three main tabs, but use less chrome. */
-@media (min-width: 801px) and (max-width: 1280px) {
-  .main-shell {
-    padding-left: 18px !important;
-    padding-right: 18px !important;
-  }
-
-  .hero {
-    padding: 38px 34px 35px !important;
-  }
-
-  .hero h1 {
-    font-size: clamp(42px, 5vw, 60px) !important;
-  }
-
-  #main-tabs [role="tablist"] {
-    width: calc(100% - 20px) !important;
-    max-width: calc(100% - 20px) !important;
-    margin-left: 10px !important;
-    margin-right: 10px !important;
-    gap: 10px !important;
-    padding: 9px !important;
-  }
-
-  #main-tabs button[role="tab"] {
-    min-height: 60px !important;
-    padding-left: 10px !important;
-    padding-right: 10px !important;
-    font-size: 13.5px !important;
-  }
-
-  #agent-result-tabs button[role="tab"] {
-    font-size: 13.5px !important;
-  }
-}
-
-/* Narrow laptop / tablet windows: move the sidebar below the workspace. */
-@media (max-width: 1080px) {
-  #workspace-row {
-    flex-direction: column !important;
-    flex-wrap: nowrap !important;
-  }
-
-  #workspace-row > * {
-    width: 100% !important;
-    max-width: 100% !important;
-    flex: 0 0 auto !important;
-  }
-
-  .side-column {
-    width: 100% !important;
-  }
-
-  .workflow-strip {
-    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-  }
-}
-
-/* Small screens: keep primary tabs usable with horizontal scrolling. */
-@media (max-width: 800px) {
-  #main-tabs [role="tablist"] {
-    display: flex !important;
-    width: calc(100% - 12px) !important;
-    max-width: calc(100% - 12px) !important;
-    margin-left: 6px !important;
-    margin-right: 6px !important;
-    gap: 10px !important;
-    padding: 8px !important;
-    overflow-x: auto !important;
-    overflow-y: hidden !important;
-    scroll-snap-type: x proximity;
-  }
-
-  #main-tabs button[role="tab"] {
-    flex: 0 0 min(78vw, 260px) !important;
-    min-width: min(78vw, 260px) !important;
-    min-height: 54px !important;
-    scroll-snap-align: start;
-  }
-
-  #dataset-actions-row,
-  .model-action-row {
-    flex-direction: column !important;
-    gap: 10px !important;
-  }
-
-  #agent-result-tabs [role="tablist"] {
-    gap: 10px !important;
-    padding: 6px !important;
-  }
-
-  #agent-result-tabs button[role="tab"] {
-    min-height: 48px !important;
-    padding: 10px 12px !important;
-    font-size: 13px !important;
-  }
-}
-
-@media (max-width: 560px) {
-  .workflow-strip,
-  .metric-strip {
-    grid-template-columns: 1fr !important;
-  }
-
-  #agent-result-tabs [role="tablist"] {
-    grid-template-columns: 1fr !important;
-  }
-}
-
 '''
 
 
 # Defines document-level metadata injected into the application page head
 HEAD = '''
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
 <meta name="theme-color" content="#050408">
 <meta name="description" content="Agentic machine learning workspace for dataset profiling, model selection, baseline evaluation, and production-oriented pipeline generation.">
 '''
@@ -2605,8 +2231,8 @@ def build_app():
             gr.HTML(workflow)
 
             # Splits the primary workspace into a main content area and a supporting sidebar
-            with gr.Row(equal_height=False, elem_id="workspace-row"):
-                with gr.Column(scale=9, min_width=0, elem_classes=["app-panel"]):
+            with gr.Row(equal_height=False):
+                with gr.Column(scale=9, min_width=600, elem_classes=["app-panel"]):
                     with gr.Tabs(selected="dataset", elem_id="main-tabs"):
                         # Builds the dataset tab for uploads, profiling, preview, and schema inspection
                         with gr.Tab("01. Dataset", id="dataset"):
@@ -2726,7 +2352,7 @@ def build_app():
                                         trace = gr.JSON(label="Agent tool calls and observations")
 
                 # Builds the sidebar containing live workspace status, runtime information, controls, and diagnostics
-                with gr.Column(scale=4, min_width=300, elem_classes=["side-column"]):
+                with gr.Column(scale=4, min_width=335, elem_classes=["side-column"]):
                     status = gr.HTML(_status(None))
                     gr.HTML(f'''
                     <div class="sidebar-card">