From 94de64150d65253a524ce8e5efede16fa5c4425b Mon Sep 17 00:00:00 2001
From: dvorakmortonxd <lolmanikyt@gmail.com>
Date: Wed, 20 May 2026 11:34:26 +0200
Subject: [PATCH] introduced a border around the heatmap and gridded it in a
 way that its always a rectangle and theres no rogue heatmap cells

---
 src/app/components/ContributionHeatmap.tsx | 3 +--
 src/app/page.css                           | 6 ++++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/app/components/ContributionHeatmap.tsx b/src/app/components/ContributionHeatmap.tsx
index 2cb3de3..c228b83 100644
--- a/src/app/components/ContributionHeatmap.tsx
+++ b/src/app/components/ContributionHeatmap.tsx
@@ -140,9 +140,8 @@ export default function ContributionHeatmap() {
             {week.map((day, dIdx) => (
               <div
                 key={dIdx}
-                className="heatmap-cell"
+                className={day.level === -1 ? "heatmap-cell heatmap-cell-empty" : "heatmap-cell"}
                 data-level={day.level >= 0 ? day.level : undefined}
-                style={{ visibility: day.level === -1 ? "hidden" : "visible" }}
                 title={day.level >= 0 ? `${day.contribs} contributions on ${day.date}` : undefined}
                 onMouseEnter={() => day.level >= 0 && setHoveredCell({ date: day.date, contribs: day.contribs })}
                 onMouseLeave={() => setHoveredCell(null)}
diff --git a/src/app/page.css b/src/app/page.css
index c29d3db..ddf79de 100644
--- a/src/app/page.css
+++ b/src/app/page.css
@@ -1116,6 +1116,8 @@ body {
   width: 100%;
   overflow-x: auto;
   gap: 2px;
+  padding: 4px;
+  border: 1px solid var(--green);
   scrollbar-width: none;
   scrollbar-color: var(--green) transparent;
 }
@@ -1164,6 +1166,10 @@ body {
   box-shadow: 0 0 6px var(--color-white);
 }
 
+.heatmap-cell-empty {
+  pointer-events: none;
+}
+
 .heatmap-cell[data-level="1"] { background-color: rgba(130,180,19, 0.4); }
 .heatmap-cell[data-level="2"] { background-color: rgba(130,180,19, 0.6); }
 .heatmap-cell[data-level="3"] { background-color: rgba(130,180,19, 0.8); }