Fix nav mode strip: underline-tab style + stable scrollbar gutter

Replace button-style strip with proper underline tabs — active side gets
an ember bottom-border matching the sidebar's existing active-link
language. Add scrollbar-gutter: stable so the sidebar interior width
does not shift when the scrollbar appears/disappears between modes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-10 13:45:55 -04:00
parent 0204430fa5
commit ccb094e57a
@@ -180,6 +180,7 @@
z-index: 1000;
transition: all 0.3s ease;
overflow-y: auto;
scrollbar-gutter: stable;
display: flex;
flex-direction: column;
}
@@ -334,28 +335,31 @@
/* ── Nav mode strip (Operations | Finance tab switcher) ──────── */
.nav-mode-strip {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3px;
padding: 8px 12px 10px;
border-bottom: 1px solid rgba(255,255,255,0.08);
display: flex;
border-bottom: 1px solid rgba(255,255,255,0.1);
padding: 0 8px;
margin-bottom: 4px;
flex-shrink: 0;
}
.nav-mode-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 7px 6px;
padding: 10px 4px 8px;
border: none;
border-radius: 5px;
border-bottom: 2px solid transparent;
border-radius: 0;
margin-bottom: -1px;
font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
font-size: 0.64rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
cursor: pointer;
transition: background 0.15s, color 0.15s;
transition: color 0.15s, border-color 0.15s;
background: transparent;
color: rgba(255,255,255,0.38);
white-space: nowrap;
@@ -367,13 +371,12 @@
}
.nav-mode-btn:hover {
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.8);
color: rgba(255,255,255,0.75);
}
.nav-mode-btn.active {
background: var(--pcl-ember, #d97706);
color: #fff;
border-bottom-color: var(--pcl-ember, #d97706);
}
/* Main Content */