SawatoMosswartsEnjoyersClub/MosswartOverlord
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(v2): cleaner mana panel — flexbox rows, readable fonts, no overflow

Browse source 
Replaced the cramped 3-column CSS Grid mana layout with simple
flexbox rows matching the player sidebar style:
- Status dot (green/red) + item name + mana current/max + time remaining
- Font sizes use rem units (0.65-0.72rem) matching sidebar buttons/stats
- tabular-nums for aligned numbers
- Time column has min-width so it doesn't get clipped
- No more horizontal scrolling or cut-off text
- Empty state message when no mana items equipped

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Erik 2026-04-12 21:47:02 +02:00
parent a8078c51ec
commit bc247aa9b3
3 changed files with 50 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

20
frontend/src/components/windows/InventoryWindow.tsx
View file

@ -333,24 +333,26 @@ export const InventoryWindow: React.FC<Props> = ({ id, charName, zIndex }) => {
</div>
{/* RIGHT: Mana panel */}
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 162 }}>
<div style={{ padding: '3px 6px', fontSize: 11, fontWeight: 'bold', color: '#ccc', background: '#111', borderBottom: `1px solid ${gold}` }}>Mana</div>
<div style={{ flex: 1, overflowY: 'auto' }}>
<div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', minWidth: 160 }}>
<div style={{ padding: '4px 8px', fontSize: '0.72rem', fontWeight: 600, color: '#aaa', background: '#111', borderBottom: `1px solid ${gold}` }}>Mana</div>
<div style={{ flex: 1, overflowY: 'auto', padding: '2px 0' }}>
{Array.from(equippedMap.values())
.filter((i: any) => (i.current_mana > 0 || i.max_mana > 0))
.sort((a: any, b: any) => (a.current_mana ?? 999999) - (b.current_mana ?? 999999))
.map((item: any, i: number) => (
<div key={i} style={{ display: 'grid', gridTemplateColumns: '18px 1fr 14px', gridTemplateRows: 'auto auto', gap: '0 4px', alignItems: 'center', background: 'rgba(18,24,34,0.9)', border: '1px solid rgba(255,255,255,0.08)', padding: '1px 2px', minHeight: 20, cursor: 'pointer' }}
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '3px 6px', borderBottom: '1px solid #1a1a1a', cursor: 'pointer' }}
onMouseEnter={e => handleHover(item, e)} onMouseMove={e => handleHover(item, e)} onMouseLeave={() => handleHover(null)}>
<div style={{ gridRow: '1 / span 2', width: 16, height: 16 }}><ItemIcon item={item} size={16} /></div>
<div style={{ color: '#f2e6c9', fontSize: 9, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{item.name}</div>
<div style={{ width: 10, height: 10, borderRadius: '50%', background: item.current_mana > 0 ? '#76d17f' : '#ff8e6f', justifySelf: 'center' }} />
<div style={{ color: '#98d7ff', fontSize: 9 }}>{item.current_mana ?? 0} / {item.max_mana ?? 0}</div>
<div style={{ color: '#cfe6a0', fontSize: 9, textAlign: 'right' }}>
<div style={{ width: 8, height: 8, borderRadius: '50%', background: item.current_mana > 0 ? '#4c4' : '#c44', flexShrink: 0 }} />
<div style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', fontSize: '0.68rem', color: '#ccc' }}>{item.name}</div>
<div style={{ fontSize: '0.65rem', color: '#88bbff', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums' }}>{item.current_mana ?? 0}/{item.max_mana ?? 0}</div>
<div style={{ fontSize: '0.63rem', color: '#9c9', whiteSpace: 'nowrap', fontVariantNumeric: 'tabular-nums', minWidth: 42, textAlign: 'right' }}>
{item.max_mana > 0 ? formatManaTime(item.current_mana ?? 0, item.max_mana ?? 0) : ''}
</div>
</div>
))}
{Array.from(equippedMap.values()).filter((i: any) => (i.current_mana > 0 || i.max_mana > 0)).length === 0 && (
<div style={{ padding: 12, color: '#555', textAlign: 'center', fontSize: '0.7rem' }}>No mana items equipped</div>
)}
</div>
</div>
</div>