let5see/clawdbot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): Make sidebar sticky while scrolling content (#1515)

Browse Source 
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 <pook@nast.local>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
pookNast
2026-01-23 19:58:37 -05:00
committed by GitHub
parent c1b7f6b6ba
commit c04f8ba1ea
1 changed files with 9 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/styles/layout.css
View File

@@ -5,7 +5,7 @@
--shell-topbar-height: 56px; --shell-topbar-height: 56px;
--shell-focus-duration: 220ms; --shell-focus-duration: 220ms;
--shell-focus-ease: cubic-bezier(0.2, 0.85, 0.25, 1); --shell-focus-ease: cubic-bezier(0.2, 0.85, 0.25, 1);
min-height: 100vh; height: 100vh;
display: grid; display: grid;
grid-template-columns: var(--shell-nav-width) minmax(0, 1fr); grid-template-columns: var(--shell-nav-width) minmax(0, 1fr);
grid-template-rows: var(--shell-topbar-height) 1fr; grid-template-rows: var(--shell-topbar-height) 1fr;
@@ -15,6 +15,13 @@
gap: 0; gap: 0;
animation: dashboard-enter 0.6s ease-out; animation: dashboard-enter 0.6s ease-out;
transition: grid-template-columns var(--shell-focus-duration) var(--shell-focus-ease); transition: grid-template-columns var(--shell-focus-duration) var(--shell-focus-ease);
overflow: hidden;
}
@supports (height: 100dvh) {
.shell {
height: 100dvh;
}
} }
.shell--chat { .shell--chat {
@@ -148,6 +155,7 @@
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
transition: width var(--shell-focus-duration) var(--shell-focus-ease), transition: width var(--shell-focus-duration) var(--shell-focus-ease),
padding 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 { .shell--chat-focus .nav {