feat: better layout for bar charts

src/renderer/a2ui/components/A2UIChart.tsx

@@ -72,6 +72,7 @@ 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>
+      <div className="assistant-panel-chart-body">
         {series.map((entry, index) => {
           const totalValue = isStacked && entry.segments
             ? entry.segments.reduce((sum, s) => sum + s.value, 0)
@@ -107,6 +108,7 @@ export const A2UIChart: React.FC<A2UIComponentProps> = ({ component }) => {
             </div>
           );
         })}
+      </div>
       {isStacked && segmentLabels.length > 0 && (
         <div className="assistant-panel-chart-legend">
           {segmentLabels.map((label, i) => (

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;