From c04f8ba1eadefc66599e0a1c205aa1dfda1b20d4 Mon Sep 17 00:00:00 2001 From: pookNast Date: Fri, 23 Jan 2026 19:58:37 -0500 Subject: [PATCH] fix(ui): Make sidebar sticky while scrolling content (#1515) The left navigation sidebar now stays fixed when scrolling through long content pages like /skills. Changed .shell from min-height to fixed height with overflow: hidden, allowing nav and content to scroll independently within their grid cells. Co-authored-by: pookNast Co-authored-by: Claude Opus 4.5 --- ui/src/styles/layout.css | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/ui/src/styles/layout.css b/ui/src/styles/layout.css index bc3d82dc2..7f2161449 100644 --- a/ui/src/styles/layout.css +++ b/ui/src/styles/layout.css @@ -5,7 +5,7 @@ --shell-topbar-height: 56px; --shell-focus-duration: 220ms; --shell-focus-ease: cubic-bezier(0.2, 0.85, 0.25, 1); - min-height: 100vh; + height: 100vh; display: grid; grid-template-columns: var(--shell-nav-width) minmax(0, 1fr); grid-template-rows: var(--shell-topbar-height) 1fr; @@ -15,6 +15,13 @@ gap: 0; animation: dashboard-enter 0.6s ease-out; transition: grid-template-columns var(--shell-focus-duration) var(--shell-focus-ease); + overflow: hidden; +} + +@supports (height: 100dvh) { + .shell { + height: 100dvh; + } } .shell--chat { @@ -148,6 +155,7 @@ backdrop-filter: blur(18px); transition: width var(--shell-focus-duration) var(--shell-focus-ease), padding var(--shell-focus-duration) var(--shell-focus-ease); + min-height: 0; /* Allow grid item to shrink and enable scrolling */ } .shell--chat-focus .nav {