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) */}
|
{/* Flyout panel (icon rail only) */}
|
||||||
{hasChildren && !sidebarPinned && flyoutIndex === key && (
|
{hasChildren && !sidebarPinned && flyoutIndex === key && (
|
||||||
<div
|
<div
|
||||||
className="fixed z-50 ml-1"
|
className="absolute left-full top-0 z-50 ml-1"
|
||||||
style={{
|
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',
|
maxHeight: '70vh',
|
||||||
overflowY: 'auto',
|
overflowY: 'auto',
|
||||||
}}
|
}}
|
||||||
@@ -391,8 +380,8 @@ export function Sidebar() {
|
|||||||
return (
|
return (
|
||||||
<nav
|
<nav
|
||||||
ref={sidebarRef}
|
ref={sidebarRef}
|
||||||
className="sidebar flex flex-col"
|
className="sidebar flex flex-col h-full"
|
||||||
style={{ background: '#0f1118', borderRight: '1px solid #1e2130' }}
|
style={{ background: '#0f1118', borderRight: '1px solid #1e2130', minHeight: '100vh' }}
|
||||||
onWheel={handleWheel}
|
onWheel={handleWheel}
|
||||||
>
|
>
|
||||||
{/* Pinned sidebar content */}
|
{/* Pinned sidebar content */}
|
||||||
@@ -448,7 +437,7 @@ export function Sidebar() {
|
|||||||
<div className="flex-1" />
|
<div className="flex-1" />
|
||||||
|
|
||||||
{/* Footer: Account + Pin */}
|
{/* 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) => (
|
{footerItems.map((item, i) => (
|
||||||
<div key={`footer-${i}`} data-flyout-key={`footer-${i}`}>
|
<div key={`footer-${i}`} data-flyout-key={`footer-${i}`}>
|
||||||
{renderRailItem(item, `footer-${i}-inner`)}
|
{renderRailItem(item, `footer-${i}-inner`)}
|
||||||
|
|||||||
Reference in New Issue
Block a user