Fix pagination bounds in HistoryChart and add responsive grid to TopTags

src/components/HistoryChart/HistoryChart.view.tsx

@@ -58,19 +58,28 @@ export default function HistoryChartView(props: ViewProps) {
   const theme = useTheme();
   const isDark = theme.palette.mode === "dark";
 
+  const total = currentData.length;
+  const maxStartIndex = Math.max(total - visibleCount, 0);
+  const clampedStartIndex = Math.min(startIndex, maxStartIndex);
+
   const handleTabChange = (_: React.MouseEvent<HTMLElement>, newTab: string | null) => {
     if (newTab !== null) setActiveTab(newTab);
   };
 
-  const canGoLeft = startIndex > 0;
-  const canGoRight = startIndex + visibleCount < currentData.length;
+  const canGoLeft = clampedStartIndex > 0;
+  const canGoRight = clampedStartIndex < maxStartIndex;
 
   const handlePrev = () => {
-    if (canGoLeft) setStartIndex((prev) => prev - visibleCount);
+    if (!canGoLeft) return;
+    setStartIndex((prev) => Math.max(prev - visibleCount, 0));
   };
 
   const handleNext = () => {
-    if (canGoRight) setStartIndex((prev) => prev + visibleCount);
+    if (!canGoRight) return;
+    setStartIndex((prev) => {
+      const next = prev + visibleCount;
+      return Math.min(next, maxStartIndex);
+    });
   };
 
   return (

src/components/ProgressCard/TopTags.tsx

@@ -86,7 +86,11 @@ export default function TopTags({
     <Box
       sx={{
         display: "grid",
-        gridTemplateColumns: "repeat(4, 1fr)",
+        gridTemplateColumns: {
+          xs: "1fr",
+          sm: "repeat(2, 1fr)",
+          md: "repeat(4, 1fr)"
+        },
         gap: 2
       }}
     >