danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix memory bar width not scaling correctly

Browse source 
The StackedMemoryBar component was using flex layout for segments,
but flex children grow by default regardless of percentage width.
Changed to absolute positioning (like MetricBar uses) so the width
percentages actually work as expected.

Related to #788
This commit is contained in:
rcourtman 2025-11-30 23:46:56 +00:00
parent 6ff3f57ac7
commit 32ffc1046c
1 changed files with 18 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
frontend-modern/src/components/Dashboard/StackedMemoryBar.tsx
View file

@ -119,21 +119,31 @@ export function StackedMemoryBar(props: StackedMemoryBarProps) {
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
{/* Stacked segments */}
<div class="absolute top-0 left-0 h-full w-full flex">
<For each={segments()}>
{(segment, idx) => (
{/* Stacked segments - use absolute positioning like MetricBar for correct width scaling */}
<For each={segments()}>
{(segment, idx) => {
// Calculate left offset as sum of previous segments
const leftOffset = () => {
let offset = 0;
const segs = segments();
for (let i = 0; i < idx(); i++) {
offset += segs[i].percent;
}
return offset;
};
return (
<div
class="h-full transition-all duration-300"
class="absolute top-0 h-full transition-all duration-300"
style={{
left: `${leftOffset()}%`,
width: `${segment.percent}%`,
'background-color': segment.color,
'border-right': idx() < segments().length - 1 ? '1px solid rgba(255,255,255,0.3)' : 'none',
}}
/>
)}
</For>
</div>
);
}}
</For>
{/* Swap Indicator (Thin line at bottom if swap is used) */}
{/* Swap Indicator (Thin line at bottom if swap is used) */}