From c45747cac0f2be4bd0ffc836ffc16901686cab43 Mon Sep 17 00:00:00 2001
From: hugo <hugoms@me.com>
Date: Thu, 26 Feb 2026 12:22:53 +0100
Subject: [PATCH] feat: better layout for bar charts

---
 src/renderer/a2ui/components/A2UIChart.tsx    | 68 ++++++++++---------
 .../AssistantSidebar/AssistantSidebar.css     |  8 ++-
 2 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/src/renderer/a2ui/components/A2UIChart.tsx b/src/renderer/a2ui/components/A2UIChart.tsx
index 20d3976..faf87bc 100644
--- a/src/renderer/a2ui/components/A2UIChart.tsx
+++ b/src/renderer/a2ui/components/A2UIChart.tsx
@@ -72,41 +72,43 @@ export const A2UIChart: React.FC<A2UIComponentProps> = ({ component }) => {
     <div className="assistant-panel-chart">
       {title && <p className="assistant-panel-chart-title">{title}</p>}
       <div className="assistant-panel-chart-type">{chartType}</div>
-      {series.map((entry, index) => {
-        const totalValue = isStacked && entry.segments
-          ? entry.segments.reduce((sum, s) => sum + s.value, 0)
-          : entry.value;
+      <div className="assistant-panel-chart-body">
+        {series.map((entry, index) => {
+          const totalValue = isStacked && entry.segments
+            ? entry.segments.reduce((sum, s) => sum + s.value, 0)
+            : entry.value;
 
-        return (
-          <div key={`${component.id}-series-${index}`} className="assistant-panel-chart-item">
-            <span className="assistant-panel-chart-label">{entry.label}</span>
-            <div className="assistant-panel-chart-bar-track">
-              {isStacked && entry.segments ? (
-                entry.segments.map((seg, si) => {
-                  const segWidth = maxValue > 0 ? (seg.value / maxValue) * 100 : 0;
-                  return (
-                    <div
-                      key={`${component.id}-seg-${index}-${si}`}
-                      className="assistant-panel-chart-bar-segment"
-                      style={{
-                        width: `${segWidth}%`,
-                        backgroundColor: getSegmentColor(segmentLabels.indexOf(seg.label)),
-                      }}
-                      title={`${seg.label}: ${seg.value}`}
-                    />
-                  );
-                })
-              ) : (
-                <div
-                  className="assistant-panel-chart-bar-fill"
-                  style={{ width: `${maxValue > 0 ? (entry.value / maxValue) * 100 : 0}%` }}
-                />
-              )}
+          return (
+            <div key={`${component.id}-series-${index}`} className="assistant-panel-chart-item">
+              <span className="assistant-panel-chart-label">{entry.label}</span>
+              <div className="assistant-panel-chart-bar-track">
+                {isStacked && entry.segments ? (
+                  entry.segments.map((seg, si) => {
+                    const segWidth = maxValue > 0 ? (seg.value / maxValue) * 100 : 0;
+                    return (
+                      <div
+                        key={`${component.id}-seg-${index}-${si}`}
+                        className="assistant-panel-chart-bar-segment"
+                        style={{
+                          width: `${segWidth}%`,
+                          backgroundColor: getSegmentColor(segmentLabels.indexOf(seg.label)),
+                        }}
+                        title={`${seg.label}: ${seg.value}`}
+                      />
+                    );
+                  })
+                ) : (
+                  <div
+                    className="assistant-panel-chart-bar-fill"
+                    style={{ width: `${maxValue > 0 ? (entry.value / maxValue) * 100 : 0}%` }}
+                  />
+                )}
+              </div>
+              <span className="assistant-panel-chart-value">{totalValue}</span>
             </div>
-            <span className="assistant-panel-chart-value">{totalValue}</span>
-          </div>
-        );
-      })}
+          );
+        })}
+      </div>
       {isStacked && segmentLabels.length > 0 && (
         <div className="assistant-panel-chart-legend">
           {segmentLabels.map((label, i) => (
diff --git a/src/renderer/components/AssistantSidebar/AssistantSidebar.css b/src/renderer/components/AssistantSidebar/AssistantSidebar.css
index 9daf599..2aed072 100644
--- a/src/renderer/components/AssistantSidebar/AssistantSidebar.css
+++ b/src/renderer/components/AssistantSidebar/AssistantSidebar.css
@@ -155,14 +155,18 @@
   opacity: 0.7;
 }
 
-.assistant-panel-chart-item {
+.assistant-panel-chart-body {
   display: grid;
   grid-template-columns: auto 1fr auto;
-  gap: 8px;
+  gap: 4px 8px;
   align-items: center;
   font-size: 12px;
 }
 
+.assistant-panel-chart-item {
+  display: contents;
+}
+
 .assistant-panel-chart-label {
   justify-self: end;
   white-space: nowrap;