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;
   }