Update app.py

app.py

@@ -1999,6 +1999,176 @@ ul.options[role="listbox"] {
   }
 }
 
+
+/* =========================================================
+   LAPTOP RESPONSIVE LAYOUT FIX
+   Keeps long labels inside their controls and keeps the three
+   ML Modeling action buttons aligned on one row on laptops.
+   ========================================================= */
+
+/* Dataset action row: equal controls, but allow long button text to wrap cleanly. */
+#dataset-actions-row {
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  gap: 14px !important;
+}
+
+#dataset-actions-row > * {
+  flex: 1 1 0 !important;
+  min-width: 0 !important;
+}
+
+#dataset-actions-row #load-button,
+#dataset-actions-row #example-button,
+#dataset-actions-row #clear-button,
+#dataset-actions-row #load-button button,
+#dataset-actions-row #example-button button,
+#dataset-actions-row #clear-button button {
+  width: 100% !important;
+  min-width: 0 !important;
+  height: auto !important;
+  max-height: none !important;
+  min-height: 56px !important;
+}
+
+#dataset-actions-row #load-button button,
+#dataset-actions-row #example-button button,
+#dataset-actions-row #clear-button button {
+  white-space: normal !important;
+  overflow-wrap: anywhere !important;
+  word-break: normal !important;
+  line-height: 1.18 !important;
+  padding: 10px 14px !important;
+  text-align: center !important;
+}
+
+/* Primary tabs: give the long ML Modeling label more room and allow wrapping. */
+@media (min-width: 801px) {
+  #main-tabs [role="tablist"] {
+    grid-template-columns:
+      minmax(0, 0.88fr)
+      minmax(0, 1.24fr)
+      minmax(0, 0.88fr) !important;
+    gap: 14px !important;
+  }
+
+  #main-tabs button[role="tab"] {
+    min-width: 0 !important;
+    min-height: 64px !important;
+    padding: 11px 14px !important;
+    white-space: normal !important;
+    overflow-wrap: anywhere !important;
+    word-break: normal !important;
+    line-height: 1.16 !important;
+    text-align: center !important;
+  }
+}
+
+/* ML Modeling actions: always one aligned row on laptop/desktop. */
+.model-action-row {
+  width: 100% !important;
+  max-width: none !important;
+  margin: 24px 0 0 !important;
+  display: flex !important;
+  flex-wrap: nowrap !important;
+  align-items: stretch !important;
+  justify-content: stretch !important;
+  gap: 16px !important;
+}
+
+.model-action-row > * {
+  flex: 1 1 0 !important;
+  width: auto !important;
+  max-width: none !important;
+  min-width: 0 !important;
+  margin: 0 !important;
+}
+
+.model-action-row #train-button,
+.model-action-row #compare-button,
+.model-action-row #code-button,
+.model-action-row #train-button button,
+.model-action-row #compare-button button,
+.model-action-row #code-button button {
+  width: 100% !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  height: auto !important;
+  min-height: 58px !important;
+  margin: 0 !important;
+}
+
+.model-action-row #train-button button,
+.model-action-row #compare-button button,
+.model-action-row #code-button button {
+  white-space: normal !important;
+  overflow-wrap: anywhere !important;
+  word-break: normal !important;
+  line-height: 1.16 !important;
+  padding: 11px 12px !important;
+  text-align: center !important;
+}
+
+/* Laptop widths: slightly tighten text and spacing without wrapping rows. */
+@media (min-width: 801px) and (max-width: 1450px) {
+  #dataset-actions-row {
+    gap: 10px !important;
+  }
+
+  #dataset-actions-row button {
+    font-size: 12.5px !important;
+    padding-left: 10px !important;
+    padding-right: 10px !important;
+  }
+
+  #main-tabs [role="tablist"] {
+    gap: 10px !important;
+    padding-left: 12px !important;
+    padding-right: 12px !important;
+  }
+
+  #main-tabs button[role="tab"] {
+    font-size: 12.5px !important;
+    padding-left: 9px !important;
+    padding-right: 9px !important;
+  }
+
+  .model-action-row {
+    gap: 12px !important;
+  }
+
+  .model-action-row #train-button button,
+  .model-action-row #compare-button button,
+  .model-action-row #code-button button {
+    font-size: 13.5px !important;
+    padding-left: 9px !important;
+    padding-right: 9px !important;
+  }
+}
+
+/* Tablet/mobile: stack action controls so they remain readable. */
+@media (max-width: 800px) {
+  #dataset-actions-row,
+  .model-action-row {
+    flex-direction: column !important;
+    flex-wrap: nowrap !important;
+    gap: 12px !important;
+  }
+
+  #dataset-actions-row > *,
+  .model-action-row > * {
+    width: 100% !important;
+    max-width: none !important;
+    flex: 0 0 auto !important;
+  }
+
+  #main-tabs button[role="tab"] {
+    white-space: normal !important;
+    line-height: 1.15 !important;
+  }
+}
+
 '''