chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: sidebar fills full grid cell height

Browse Source 
Sidebar wrapper uses flex + h-full, .sidebar gets height: 100%,
removed min-height: 100vh (grid cell handles sizing).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 01:21:11 -04:00
parent ce76e146fd
commit 00ab9f1832
3 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/layout/AppLayout.tsx
View File

@@ -71,8 +71,8 @@ export function AppLayout() {
{/* Top Bar - spans full width */} {/* Top Bar - spans full width */}
<TopBar /> <TopBar />
{/* Sidebar - desktop only */} {/* Sidebar - desktop only, must fill grid row */}
<div className="hidden md:block"> <div className="hidden md:flex md:flex-col md:min-h-0 md:h-full">
<Sidebar /> <Sidebar />
</div> </div>

4
frontend/src/components/layout/Sidebar.tsx
View File

@@ -381,7 +381,7 @@ export function Sidebar() {
<nav <nav
ref={sidebarRef} ref={sidebarRef}
className="sidebar flex flex-col h-full" className="sidebar flex flex-col h-full"
style={{ background: '#0f1118', borderRight: '1px solid #1e2130', minHeight: '100vh' }} style={{ background: '#0f1118', borderRight: '1px solid #1e2130' }}
onWheel={handleWheel} onWheel={handleWheel}
> >
{/* Pinned sidebar content */} {/* Pinned sidebar content */}
@@ -422,7 +422,7 @@ export function Sidebar() {
<nav <nav
ref={sidebarRef} ref={sidebarRef}
className="sidebar flex flex-col items-center h-full" className="sidebar flex flex-col items-center h-full"
style={{ background: '#0f1118', borderRight: '1px solid #1e2130', minHeight: '100vh' }} style={{ background: '#0f1118', borderRight: '1px solid #1e2130' }}
onWheel={handleWheel} onWheel={handleWheel}
> >
{/* Grouped nav items */} {/* Grouped nav items */}

1
frontend/src/index.css
View File

@@ -272,6 +272,7 @@
.sidebar { .sidebar {
min-height: 0; min-height: 0;
height: 100%;
overflow-y: auto; overflow-y: auto;
} }