spouliot/PowderCoatingLogix
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
Scott Pouliot
2026-05-10 13:45:55 -04:00
parent 0204430fa5
commit ccb094e57a
1 changed files with 14 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/PowderCoating.Web/Views/Shared/_Layout.cshtml
+14 -11
View File
@@ -180,6 +180,7 @@
z-index: 1000; z-index: 1000;
transition: all 0.3s ease; transition: all 0.3s ease;
overflow-y: auto; overflow-y: auto;
scrollbar-gutter: stable;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@@ -334,28 +335,31 @@
/* ── Nav mode strip (Operations | Finance tab switcher) ──────── */ /* ── Nav mode strip (Operations | Finance tab switcher) ──────── */
.nav-mode-strip { .nav-mode-strip {
display: grid; display: flex;
grid-template-columns: 1fr 1fr; border-bottom: 1px solid rgba(255,255,255,0.1);
gap: 3px; padding: 0 8px;
padding: 8px 12px 10px; margin-bottom: 4px;
border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;
} }
.nav-mode-btn { .nav-mode-btn {
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 5px; gap: 5px;
padding: 7px 6px; padding: 10px 4px 8px;
border: none; 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-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
font-size: 0.64rem; font-size: 0.64rem;
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.08em; letter-spacing: 0.08em;
cursor: pointer; cursor: pointer;
transition: background 0.15s, color 0.15s; transition: color 0.15s, border-color 0.15s;
background: transparent; background: transparent;
color: rgba(255,255,255,0.38); color: rgba(255,255,255,0.38);
white-space: nowrap; white-space: nowrap;
@@ -367,13 +371,12 @@
} }
.nav-mode-btn:hover { .nav-mode-btn:hover {
background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
color: rgba(255,255,255,0.8);
} }
.nav-mode-btn.active { .nav-mode-btn.active {
background: var(--pcl-ember, #d97706);
color: #fff; color: #fff;
border-bottom-color: var(--pcl-ember, #d97706);
} }
/* Main Content */ /* Main Content */