From 9fcc564333a66e5f3adb325cc260824f22fad308 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sun, 22 Mar 2026 01:11:16 -0400
Subject: [PATCH] fix: flyout positioning, sidebar full height, pin icon
 padding

- Flyout uses absolute positioning relative to parent item (not fixed)
- Both rail and pinned sidebar stretch to full viewport height
- Pin icon has proper bottom padding to avoid cutoff

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/layout/Sidebar.tsx | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/layout/Sidebar.tsx b/frontend/src/components/layout/Sidebar.tsx
index 6ee950d8..0f3f57ae 100644
--- a/frontend/src/components/layout/Sidebar.tsx
+++ b/frontend/src/components/layout/Sidebar.tsx
@@ -250,19 +250,8 @@ export function Sidebar() {
         {/* Flyout panel (icon rail only) */}
         {hasChildren && !sidebarPinned && flyoutIndex === key && (
           <div
-            className="fixed z-50 ml-1"
+            className="absolute left-full top-0 z-50 ml-1"
             style={{
-              left: '72px',
-              top: sidebarRef.current
-                ? (() => {
-                    const itemEl = sidebarRef.current.querySelector(`[data-flyout-key="${key}"]`)
-                    if (itemEl) {
-                      const rect = itemEl.getBoundingClientRect()
-                      return `${rect.top}px`
-                    }
-                    return '0px'
-                  })()
-                : '0px',
               maxHeight: '70vh',
               overflowY: 'auto',
             }}
@@ -391,8 +380,8 @@ export function Sidebar() {
     return (
       <nav
         ref={sidebarRef}
-        className="sidebar flex flex-col"
-        style={{ background: '#0f1118', borderRight: '1px solid #1e2130' }}
+        className="sidebar flex flex-col h-full"
+        style={{ background: '#0f1118', borderRight: '1px solid #1e2130', minHeight: '100vh' }}
         onWheel={handleWheel}
       >
         {/* Pinned sidebar content */}
@@ -448,7 +437,7 @@ export function Sidebar() {
       <div className="flex-1" />
 
       {/* Footer: Account + Pin */}
-      <div className="flex flex-col items-center w-full px-1.5 pb-3 space-y-1" style={{ borderTop: '1px solid #1e2130' }}>
+      <div className="flex flex-col items-center w-full px-1.5 pb-5 pt-2 space-y-1" style={{ borderTop: '1px solid #1e2130' }}>
         {footerItems.map((item, i) => (
           <div key={`footer-${i}`} data-flyout-key={`footer-${i}`}>
             {renderRailItem(item, `footer-${i}-inner`)}