diff --git a/src/PowderCoating.Web/Views/Shared/_Layout.cshtml b/src/PowderCoating.Web/Views/Shared/_Layout.cshtml index 0192ce1..58d4656 100644 --- a/src/PowderCoating.Web/Views/Shared/_Layout.cshtml +++ b/src/PowderCoating.Web/Views/Shared/_Layout.cshtml @@ -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 */