From 32ffc1046c071957c171c584e70f6714cec248e2 Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Sun, 30 Nov 2025 23:46:56 +0000
Subject: [PATCH] Fix memory bar width not scaling correctly

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
---
 .../components/Dashboard/StackedMemoryBar.tsx | 26 +++++++++++++------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend-modern/src/components/Dashboard/StackedMemoryBar.tsx b/frontend-modern/src/components/Dashboard/StackedMemoryBar.tsx
index 6640084..d6e86f4 100644
--- a/frontend-modern/src/components/Dashboard/StackedMemoryBar.tsx
+++ b/frontend-modern/src/components/Dashboard/StackedMemoryBar.tsx
@@ -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) */}