SyslogSolution/ra-h-os
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: center view items vertically in left toolbar

Browse Source 
Top actions (collapse/search/add/refresh) stay at top.
View items (nodes/skills/map/etc) sit in a flex:1 middle
section, vertically centered with a subtle top border separator.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
“BeeRad”
2026-03-17 20:25:34 +11:00
co-authored by Claude Sonnet 4.6
parent 21ca364d80
commit 64aaf10feb
1 changed files with 30 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/LeftToolbar.tsx
+30 -26
View File
@@ -120,40 +120,44 @@ export default function LeftToolbar({
background: 'transparent', background: 'transparent',
display: 'flex', display: 'flex',
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'space-between',
padding: '12px 8px', padding: '12px 8px',
flexShrink: 0, flexShrink: 0,
transition: 'width 0.2s ease', transition: 'width 0.2s ease',
overflow: 'hidden', overflow: 'hidden',
}} }}
> >
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', height: '100%' }}>
<NavButton {/* Top: collapse + actions */}
icon={isExpanded ? PanelLeftClose : PanelLeftOpen} <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
label={isExpanded ? 'Collapse' : 'Expand'} <NavButton
expanded={isExpanded} icon={isExpanded ? PanelLeftClose : PanelLeftOpen}
onClick={onToggleExpanded} label={isExpanded ? 'Collapse' : 'Expand'}
/> expanded={isExpanded}
onClick={onToggleExpanded}
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}> />
<NavButton icon={Search} label="Search" expanded={isExpanded} onClick={onSearchClick} /> <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
<NavButton icon={Plus} label="Add Stuff" expanded={isExpanded} onClick={onAddStuffClick} /> <NavButton icon={Search} label="Search" expanded={isExpanded} onClick={onSearchClick} />
<NavButton icon={RefreshCw} label="Refresh" expanded={isExpanded} onClick={onRefreshClick} /> <NavButton icon={Plus} label="Add Stuff" expanded={isExpanded} onClick={onAddStuffClick} />
<NavButton icon={RefreshCw} label="Refresh" expanded={isExpanded} onClick={onRefreshClick} />
</div>
</div> </div>
<div style={{ borderTop: '1px solid var(--rah-border)', paddingTop: '14px', marginTop: '10px' }}> {/* Middle: view items, vertically centered */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '4px', paddingTop: '4px' }}> <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 0 }}>
{VIEW_ITEMS.map((item) => ( <div style={{ borderTop: '1px solid var(--rah-border)', paddingTop: '14px' }}>
<NavButton <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
key={`${item.paneType}-${item.label}`} {VIEW_ITEMS.map((item) => (
icon={item.icon} <NavButton
label={item.label} key={`${item.paneType}-${item.label}`}
expanded={isExpanded} icon={item.icon}
active={activeTabType === item.paneType || openTabTypes.has(item.paneType)} label={item.label}
onClick={() => onPaneTypeClick(item.paneType)} expanded={isExpanded}
activeTone="green" active={activeTabType === item.paneType || openTabTypes.has(item.paneType)}
/> onClick={() => onPaneTypeClick(item.paneType)}
))} activeTone="green"
/>
))}
</div>
</div> </div>
</div> </div>
</div> </div>