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>
This commit is contained in:
Michael Chihlas
2026-03-22 01:11:16 -04:00
parent bef649bb9a
commit 9fcc564333

View File

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