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

fix(v2): more visible pack capacity bars — wider, brighter border, tooltip

Browse source 
Increased bar width to 7px with #222 background and #666 border for
better contrast. Added tooltip showing "X% full" on hover. Minimum
2px fill height when non-empty so even nearly-empty packs show a sliver.

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

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

@ -149,8 +149,9 @@ function PackIcon({ iconSrc, isActive, fillPct, label, onClick }: {
<img src={iconSrc} alt="" style={{ width: 26, height: 26, objectFit: 'contain', imageRendering: 'pixelated' }}
onError={e => { (e.target as HTMLImageElement).src = '/icons/06001080.png'; }} />
</div>
<div style={{ width: 5, height: 30, background: '#111', border: '1px solid #333', position: 'relative', overflow: 'hidden', borderRadius: 1 }}>
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: `${fillPct}%`, background: fillColor, transition: 'height 0.3s' }} />
<div style={{ width: 7, height: 30, background: '#222', border: '1px solid #666', position: 'relative', overflow: 'hidden', borderRadius: 2 }}
title={`${Math.round(fillPct)}% full`}>
<div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: `${fillPct}%`, background: fillColor, minHeight: fillPct > 0 ? 2 : 0 }} />
</div>
</div>
);