Update app.py

app.py

@@ -2169,6 +2169,67 @@ ul.options[role="listbox"] {
   }
 }
 
+
+/* =========================================================
+   REQUESTED RESPONSIVE BUTTON / TAB REFINEMENTS
+   Scope: only the three items requested in the UI review.
+   ========================================================= */
+
+/* 1) Wide desktop: keep the three ML Modeling actions centered as a group.
+      Laptop behavior (<=1450px) remains unchanged. */
+@media (min-width: 1451px) {
+  .model-action-row {
+    max-width: 850px !important;
+    margin: 24px auto 0 !important;
+    justify-content: center !important;
+    gap: 18px !important;
+  }
+
+  .model-action-row > *,
+  .model-action-row #train-button,
+  .model-action-row #compare-button,
+  .model-action-row #code-button {
+    flex: 0 1 260px !important;
+    width: 260px !important;
+    max-width: 260px !important;
+    min-width: 0 !important;
+  }
+}
+
+/* 2) Agent result tabs: smaller, lighter, and spaced apart instead of filling
+      the full panel width. */
+#agent-result-tabs [role="tablist"] {
+  max-width: 540px !important;
+  gap: 18px !important;
+  margin: 14px auto 0 !important;
+  padding: 0 !important;
+  background: transparent !important;
+}
+
+#agent-result-tabs button[role="tab"] {
+  min-height: 36px !important;
+  padding: 7px 12px !important;
+  border-radius: 9px !important;
+  font-size: 12px !important;
+  line-height: 1.15 !important;
+}
+
+/* 3) Primary 01 / 02 / 03 tabs: reduce vertical bulk and leave a clean gutter
+      above the tab-rail divider so the button bottoms do not crowd/overlap it. */
+@media (min-width: 801px) {
+  #main-tabs [role="tablist"] {
+    min-height: 0 !important;
+    padding: 7px 14px 11px !important;
+    align-items: center !important;
+  }
+
+  #main-tabs button[role="tab"] {
+    min-height: 42px !important;
+    padding: 8px 12px !important;
+    border-radius: 12px !important;
+  }
+}
+
 '''