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`)}