B-221: keep header tape readable and commands inside the viewport

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>

app/frontend/shared/shell.css

@@ -2280,9 +2280,9 @@ body.sidebar-collapsed .status-bar {
 
   align-items: center;
 
-  gap: 24px;
+  gap: var(--header-cluster-gap);
 
-  padding: 0 20px;
+  padding: 0 var(--header-pad-x);
 
   height: var(--topbar-height);
 }
@@ -3217,8 +3217,8 @@ body.sidebar-collapsed .status-bar {
 /* Generic page title slot in the shell header. Kept hidden so each page owns
    its own in-view title header (mentor renders one inside #mentorView). */
 .app-page-context {
-  min-width: 148px;
-  max-width: 280px;
+  min-width: var(--header-page-context-min);
+  max-width: var(--header-page-context-max);
   flex: 0 1 auto;
   flex-direction: column;
   justify-content: center;
@@ -3227,6 +3227,19 @@ body.sidebar-collapsed .status-bar {
   display: flex;
 }
 
+.app-header .app-page-context,
+.main .app-header .app-page-context {
+  min-width: var(--header-page-context-min);
+  max-width: var(--header-page-context-max);
+  overflow: hidden;
+}
+
+.main .app-header .app-page-context span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 #themeModeText {
   display: none;
 }
@@ -3255,11 +3268,11 @@ body.sidebar-collapsed .status-bar {
 .app-header .overview-strip[data-overview-expanded="true"] {
   position: static;
   display: flex;
-  flex: 1 1 auto;
+  flex: 1 0 auto;
   align-items: stretch;
   width: auto;
   height: auto;
-  min-width: 0;
+  min-width: max-content;
   min-height: 0;
   margin: 0;
   padding: 0;
@@ -3271,22 +3284,29 @@ body.sidebar-collapsed .status-bar {
 
 .app-header .market-tape {
   display: flex;
-  flex: 1 1 auto;
+  flex: 1 0 auto;
   align-items: center;
-  min-width: 0;
+  min-width: max-content;
   gap: 0;
-  overflow: hidden;
+  overflow: visible;
   white-space: nowrap;
 }
 
 .tape-metric {
   position: relative;
   display: flex;
+  flex: 0 0 auto;
   flex-direction: column;
   justify-content: center;
   gap: 2px;
-  min-width: 0;
-  padding: 0 16px;
+  min-width: max-content;
+  padding: 0 var(--header-tape-metric-pad-x);
+}
+
+.app-header .tape-metric,
+.app-header .tape-sentiment.sentiment-block {
+  flex: 0 0 auto;
+  min-width: max-content;
 }
 
 .tape-metric + .tape-metric::before,
@@ -3311,7 +3331,7 @@ body.sidebar-collapsed .status-bar {
   display: flex;
   align-items: center;
   gap: 5px;
-  overflow: hidden;
+  overflow: visible;
   color: var(--text-1);
   font-size: 15px;
   font-weight: 600;
@@ -3400,7 +3420,7 @@ body.sidebar-collapsed .status-bar {
   gap: 4px;
   height: 28px;
   min-height: 28px;
-  margin-left: 14px;
+  margin-left: var(--header-tape-toggle-gap);
   padding: 0 10px;
   border: 0;
   border-radius: var(--radius-md);
@@ -3473,7 +3493,7 @@ body.sidebar-collapsed .status-bar {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
-  gap: 6px;
+  gap: var(--header-action-gap);
   margin-left: 0;
   overflow: visible;
 }
@@ -3601,31 +3621,6 @@ body.sidebar-collapsed .status-bar {
   }
 }
 
-@media (min-width: 1280px) {
-  .tape-metric {
-    padding: 0 10px;
-  }
-
-  .app-header {
-    gap: 16px;
-  }
-}
-
-@media (min-width: 1280px) and (max-width: 1599px) {
-  .app-page-context {
-    min-width: 96px;
-    max-width: 128px;
-  }
-
-  .app-header .header-actions {
-    gap: 4px;
-  }
-
-  .app-header .header-command-group {
-    gap: 4px;
-  }
-}
-
 @media (max-width: 1440px) {
   .app-page-context {
     display: none;
@@ -3711,7 +3706,7 @@ body.sidebar-collapsed .status-bar {
     flex: 0 0 auto;
     flex-direction: row;
     align-items: center;
-    gap: 6px;
+    gap: var(--header-command-gap);
     width: auto;
     max-width: none;
     padding: 0;

app/frontend/shared/tokens.css

@@ -182,6 +182,14 @@
   --sidebar-width: var(--size-sidebar);
   --sidebar-compact-width: 64px;
   --topbar-height: var(--size-topbar);
+  --header-pad-x: 20px;
+  --header-cluster-gap: 24px;
+  --header-action-gap: 6px;
+  --header-command-gap: 6px;
+  --header-tape-metric-pad-x: 16px;
+  --header-tape-toggle-gap: 14px;
+  --header-page-context-min: 148px;
+  --header-page-context-max: 280px;
   --summary-height: var(--size-summary);
   --statusbar-height: var(--size-statusbar);
   --page-pad-y: var(--size-page-pad-y);
@@ -517,3 +525,16 @@
   --shadow-soft: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .16);
   --shadow: 0 18px 50px rgba(0, 0, 0, .46);
 }
+
+@media (min-width: 1280px) and (max-width: 1919px) {
+  :root {
+    --header-pad-x: 12px;
+    --header-cluster-gap: 8px;
+    --header-action-gap: 4px;
+    --header-command-gap: 4px;
+    --header-tape-metric-pad-x: 6px;
+    --header-tape-toggle-gap: 4px;
+    --header-page-context-min: 96px;
+    --header-page-context-max: 148px;
+  }
+}