Positioning, sizing and sorting of the gadgets improved.

frontend/src/components/today/TodayBarChart.tsx

@@ -11,6 +11,7 @@ import {
   YAxis,
 } from 'recharts';
 import type { TodayChartBucket } from '@/types/today';
+import { TodayChartFrame } from '@/components/today/TodayChartFrame';
 import {
   TODAY_CHART_AXIS_COLOR,
   TODAY_CHART_COLORS,
@@ -31,11 +32,12 @@ export function TodayBarChart({ data, colorForCode }: TodayBarChartProps) {
   }));
 
   return (
-    <ResponsiveContainer width="100%" height={220}>
-      <BarChart
-        data={chartData}
-        margin={{ top: 8, right: 8, left: -12, bottom: 0 }}
-      >
+    <TodayChartFrame>
+      <ResponsiveContainer width="100%" height="100%">
+        <BarChart
+          data={chartData}
+          margin={{ top: 8, right: 8, left: -12, bottom: 0 }}
+        >
         <CartesianGrid stroke={TODAY_CHART_GRID_COLOR} vertical={false} />
         <XAxis
           dataKey="shortLabel"
@@ -105,7 +107,8 @@ export function TodayBarChart({ data, colorForCode }: TodayBarChartProps) {
           ))}
         </Bar>
       </BarChart>
-    </ResponsiveContainer>
+      </ResponsiveContainer>
+    </TodayChartFrame>
   );
 }