From 00ab9f1832735111dae48abec851b99ddddca740 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sun, 22 Mar 2026 01:21:11 -0400
Subject: [PATCH] fix: sidebar fills full grid cell height

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>
---
 frontend/src/components/layout/AppLayout.tsx | 4 ++--
 frontend/src/components/layout/Sidebar.tsx   | 4 ++--
 frontend/src/index.css                       | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/layout/AppLayout.tsx b/frontend/src/components/layout/AppLayout.tsx
index d9ea115f..0828ad50 100644
--- a/frontend/src/components/layout/AppLayout.tsx
+++ b/frontend/src/components/layout/AppLayout.tsx
@@ -71,8 +71,8 @@ export function AppLayout() {
       {/* Top Bar - spans full width */}
       <TopBar />
 
-      {/* Sidebar - desktop only */}
-      <div className="hidden md:block">
+      {/* Sidebar - desktop only, must fill grid row */}
+      <div className="hidden md:flex md:flex-col md:min-h-0 md:h-full">
         <Sidebar />
       </div>
 
diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 812a2a8e..b48c5b88 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -381,7 +381,7 @@ export function Sidebar() {
       <nav
         ref={sidebarRef}
         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}
       >
         {/* Pinned sidebar content */}
@@ -422,7 +422,7 @@ export function Sidebar() {
     <nav
       ref={sidebarRef}
       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}
     >
       {/* Grouped nav items */}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 34a7fbb9..c4e29bcc 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -272,6 +272,7 @@
 
   .sidebar {
     min-height: 0;
+    height: 100%;
     overflow-y: auto;
   }