fixes for toggles

src/components/HistoryChart.tsx

@@ -103,7 +103,12 @@ export default function HistoryChart({
       : 1;
 
   const [startIndex, setStartIndex] = React.useState(0);
-  const visibleCount = activeDataKey == 'daily' ? 7 : 6;
+  const visibleCountDataTabMapping = {
+    daily: 7,
+    weekly: 6,
+    monthly: 4,
+  }
+  const visibleCount = visibleCountDataTabMapping[activeDataKey];
   const total = currentData.length;
 
   // clamp startIndex so we always show full 5 (when possible)
@@ -163,29 +168,60 @@ export default function HistoryChart({
         ))}
       </ToggleButtonGroup>
 
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          mb: 3
+        }}
+      >
+        {/* Rolling / Calendar */}
         <ToggleButtonGroup
           value={period}
           exclusive
           onChange={(_, v) => v && onPeriodChange(v)}
           size="small"
-        sx={{ mb: 2 }}
         >
           <ToggleButton value="rolling">Rolling</ToggleButton>
-        <ToggleButton value="calendar" disabled={activeDataKey === "daily"}>
+          <ToggleButton
+            value="calendar"
+            disabled={activeDataKey === "daily"}
+          >
             Calendar
           </ToggleButton>
         </ToggleButtonGroup>
 
-      <ToggleButtonGroup
-        value={comparison ? "on" : "off"}
-        exclusive
-        onChange={(_, v) => setComparison(v === "on")}
+        {/* Compare toggle */}
+        <ToggleButton
+          value="compare"
+          selected={comparison}
+          onChange={() => setComparison(!comparison)}
           size="small"
-        sx={{ mb: 2 }}
+          sx={{
+            textTransform: "none",
+            borderRadius: 2,
+            px: 2,
+
+            // OFF
+            color: "text.secondary",
+            border: "1px solid",
+            borderColor: "divider",
+
+            // ON
+            "&.Mui-selected": {
+              color: "white",
+              bgcolor: "success.main",
+              borderColor: "success.main"
+            },
+            "&.Mui-selected:hover": {
+              bgcolor: "success.dark"
+            }
+          }}
         >
-        <ToggleButton value="off">Single</ToggleButton>
-        <ToggleButton value="on">Compare</ToggleButton>
-      </ToggleButtonGroup>
+          Compare
+        </ToggleButton>
+      </Box>
 
       {currentData.length > 0 ? (
         <Box sx={{ position: "relative", mt: 4 }}>