Positioning, sizing and sorting of the gadgets improved.

frontend/src/components/today/TodayRadialGaugeChart.tsx

@@ -1,6 +1,11 @@
 'use client';
 
-import { RadialBar, RadialBarChart, ResponsiveContainer } from 'recharts';
+import {
+  PolarAngleAxis,
+  RadialBar,
+  RadialBarChart,
+  ResponsiveContainer,
+} from 'recharts';
 
 import { TODAY_CHART_PRIMARY_COLOR } from '@/components/today/chart-theme';
 
@@ -10,6 +15,9 @@ interface TodayRadialGaugeChartProps {
   total: number;
   percentLabel: string;
   tasksLabel: string;
+  size?: 'sm' | 'md';
+  fillColor?: string;
+  showRatio?: boolean;
 }
 
 export function TodayRadialGaugeChart({
@@ -18,35 +26,48 @@ export function TodayRadialGaugeChart({
   total,
   percentLabel,
   tasksLabel,
+  size = 'md',
+  fillColor = TODAY_CHART_PRIMARY_COLOR,
+  showRatio = true,
 }: TodayRadialGaugeChartProps) {
+  const isCompact = size === 'sm';
   const clamped = Math.max(0, Math.min(100, percent));
-  const data = [{ name: 'completion', value: clamped, fill: TODAY_CHART_PRIMARY_COLOR }];
+  const data = [{ name: 'progress', value: clamped, fill: fillColor }];
 
   return (
-    <div className="relative h-[240px] w-full">
+    <div className={`relative w-full ${isCompact ? 'h-[108px]' : 'h-full min-h-0 flex-1'}`}>
       <ResponsiveContainer width="100%" height="100%">
         <RadialBarChart
           cx="50%"
           cy="50%"
-          innerRadius="68%"
+          innerRadius={isCompact ? '62%' : '68%'}
           outerRadius="100%"
-          barSize={14}
+          barSize={isCompact ? 9 : 14}
           data={data}
           startAngle={90}
           endAngle={-270}
         >
+          <PolarAngleAxis type="number" domain={[0, 100]} tick={false} />
           <RadialBar
             background={{ fill: 'rgba(41, 69, 106, 0.55)' }}
             dataKey="value"
-            cornerRadius={8}
+            cornerRadius={isCompact ? 6 : 8}
           />
         </RadialBarChart>
       </ResponsiveContainer>
-      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center">
-        <span className="text-3xl font-semibold text-text-primary">{percentLabel}</span>
-        <span className="mt-1 text-xs text-text-muted">{tasksLabel}</span>
-        {total > 0 ? (
-          <span className="mt-0.5 text-[11px] text-text-secondary">
+      <div className="pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center px-1">
+        <span
+          className={`font-semibold text-text-primary ${isCompact ? 'text-base leading-tight' : 'text-3xl'}`}
+        >
+          {percentLabel}
+        </span>
+        <span className={`text-text-muted ${isCompact ? 'mt-0.5 text-[10px]' : 'mt-1 text-xs'}`}>
+          {tasksLabel}
+        </span>
+        {showRatio && total > 0 ? (
+          <span
+            className={`text-text-secondary ${isCompact ? 'mt-0.5 text-[10px]' : 'mt-0.5 text-[11px]'}`}
+          >
             {completed}/{total}
           </span>
         ) : null}