Update app.py

app.py

@@ -1696,35 +1696,35 @@ html, body {
   font-feature-settings: "liga" 1, "calt" 1;
 }
 
-/* Agent result tabs: keep both buttons centered, equal-width, and evenly spaced. */
+/* Agent result tabs: compact, auto-width buttons with visible spacing (not full-width blocks). */
 #agent-result-tabs [role="tablist"] {
-  display: grid !important;
-  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
-  gap: 14px !important;
-  width: 100% !important;
-  margin: 11px auto 0 !important;
-  padding: 5px !important;
-  align-items: stretch !important;
-  justify-items: stretch !important;
-  justify-content: center !important;
-  border-radius: 13px !important;
+  display: inline-flex !important;
+  flex-wrap: wrap !important;
+  width: auto !important;
+  margin: 11px 0 0 !important;
+  padding: 4px !important;
+  gap: 10px !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
+  border-radius: 12px !important;
   background: rgba(255,255,255,.018);
 }
 
 #agent-result-tabs button[role="tab"] {
-  display: flex !important;
+  display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
-  width: 100% !important;
-  min-width: 0 !important;
-  max-width: none !important;
-  min-height: 44px !important;
+  width: auto !important;
+  min-width: 130px !important;
+  max-width: 220px !important;
+  min-height: 34px !important;
   margin: 0 !important;
-  padding: 10px 13px !important;
-  flex: 1 1 0 !important;
+  padding: 7px 16px !important;
+  flex: 0 0 auto !important;
   text-align: center !important;
   white-space: nowrap !important;
-  border-radius: 10px !important;
+  font-size: 12px !important;
+  border-radius: 9px !important;
   color: #9e93a5 !important;
 }
 
@@ -2055,32 +2055,34 @@ ul.options[role="listbox"] {
 
   #main-tabs button[role="tab"] {
     min-width: 0 !important;
-    min-height: 64px !important;
-    padding: 11px 14px !important;
+    min-height: 50px !important;
+    padding: 9px 16px !important;
     white-space: normal !important;
     overflow-wrap: anywhere !important;
     word-break: normal !important;
-    line-height: 1.16 !important;
+    line-height: 1.2 !important;
     text-align: center !important;
   }
 }
 
-/* ML Modeling actions: always one aligned row on laptop/desktop. */
+/* ML Modeling actions: kept centered as a group on laptop/desktop (matches
+   the .model-action-row rule above; this block only refines sizing so the
+   row never falls back to a left-aligned full-width stretch on wide screens). */
 .model-action-row {
   width: 100% !important;
-  max-width: none !important;
-  margin: 24px 0 0 !important;
+  max-width: 880px !important;
+  margin: 24px auto 0 !important;
   display: flex !important;
   flex-wrap: nowrap !important;
   align-items: stretch !important;
-  justify-content: stretch !important;
+  justify-content: center !important;
   gap: 16px !important;
 }
 
 .model-action-row > * {
   flex: 1 1 0 !important;
   width: auto !important;
-  max-width: none !important;
+  max-width: 280px !important;
   min-width: 0 !important;
   margin: 0 !important;
 }
@@ -2093,10 +2095,10 @@ ul.options[role="listbox"] {
 .model-action-row #code-button button {
   width: 100% !important;
   min-width: 0 !important;
-  max-width: none !important;
+  max-width: 280px !important;
   height: auto !important;
-  min-height: 58px !important;
-  margin: 0 !important;
+  min-height: 52px !important;
+  margin: 0 auto !important;
 }
 
 .model-action-row #train-button button,