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:
@@ -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`)}
|
||||
|
||||
Reference in New Issue
Block a user