From f213a9455bd132a700c23cfbe61e19c8152ece5d Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Thu, 7 May 2026 16:42:52 +0530
Subject: [PATCH] Fix pagination bounds in HistoryChart and add responsive grid
 to TopTags

---
 .../HistoryChart/HistoryChart.view.tsx          | 17 +++++++++++++----
 src/components/ProgressCard/TopTags.tsx         |  6 +++++-
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/components/HistoryChart/HistoryChart.view.tsx b/src/components/HistoryChart/HistoryChart.view.tsx
index 11c7e13..3dd3205 100644
--- a/src/components/HistoryChart/HistoryChart.view.tsx
+++ b/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 (
diff --git a/src/components/ProgressCard/TopTags.tsx b/src/components/ProgressCard/TopTags.tsx
index c8aea82..2de4cdf 100644
--- a/src/components/ProgressCard/TopTags.tsx
+++ b/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
       }}
     >