Update app.py

app.py

@@ -2169,11 +2169,385 @@ 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.">
 '''
@@ -2231,8 +2605,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):
-                with gr.Column(scale=9, min_width=600, elem_classes=["app-panel"]):
+            with gr.Row(equal_height=False, elem_id="workspace-row"):
+                with gr.Column(scale=9, min_width=0, 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"):
@@ -2352,7 +2726,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=335, elem_classes=["side-column"]):
+                with gr.Column(scale=4, min_width=300, elem_classes=["side-column"]):
                     status = gr.HTML(_status(None))
                     gr.HTML(f'''
                     <div class="sidebar-card">