feat: Modified styles

Author: MathisBurger

components/GitHeatMap.tsx

@@ -1,4 +1,3 @@
-// GitHeatMap.tsx
 import { useEffect, useState } from 'react';
 import Day from './Day';
 import style from '../styles/git.module.scss';
@@ -85,18 +84,21 @@ const GitHeatMap = () => {
         ))}
       </div>
       <div className={style.clBox}>
-        <div className={style.chartWrapper}>
-          <div className={style.chart}>
-            {days.map((day) => (
-              <Day
-                key={day.date}
-                date={day.date}
-                count={day.count}
-                sources={day.sources}
-              />
-            ))}
+        <div className={style.chartOuter}>
+          <div className={style.chartScroll}>
+            <div className={style.chart}>
+              {days.map((day) => (
+                <Day
+                  key={day.date}
+                  date={day.date}
+                  count={day.count}
+                  sources={day.sources}
+                />
+              ))}
+            </div>
           </div>
         </div>
+
         <div className={style.legend}>
           {colors.map((color, idx) => (
             <div key={idx} className={style.legendItem}>

styles/git.module.scss

@@ -2,41 +2,43 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: fit-content;
   width: 90%;
   overflow: visible;
 }
 
-.chartWrapper {
-  overflow-x: visible;
-  overflow-y: visible;
+.chartOuter {
+  overflow: visible; /* popovers must escape here */
   width: 100%;
+  position: relative;
 }
 
-@media only screen and (max-width: 1180px) {
-  .clBox {
-    width: 95vw !important;
-  }
+.chartScroll {
+  overflow: visible; /* default for desktop */
+  width: 100%;
 }
 
 @media only screen and (max-width: 768px) {
-  .chart {
-    grid-template-columns: repeat(53, 20px) !important; /* 53 weeks */
+  .chartScroll {
+    overflow-x: scroll; /* horizontal scroll only */
+    overflow-y: visible; /* critical: popovers can go UP */
   }
-  .chart::-webkit-scrollbar-track {
-    background-color: #0f1019; /* track background */
+
+  .chartScroll::-webkit-scrollbar-track {
+    background-color: #0f1019;
     border-radius: 6px;
   }
-  .chartWrapper {
-    overflow-x: scroll;
+}
+
+@media only screen and (max-width: 1180px) {
+  .clBox {
+    width: 95vw !important;
   }
 }
 
 .clBox {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: fit-content;
   width: 80%;
   overflow: visible;
 }
@@ -45,70 +47,77 @@
   display: grid;
   justify-content: center;
   align-items: center;
-  grid-template-columns: repeat(53, 1fr); /* 53 weeks */
+  grid-template-columns: repeat(53, 1fr);
   gap: 2px;
   width: 100%;
   overflow: visible;
 }
+
+@media only screen and (max-width: 768px) {
+  .chart {
+    grid-template-columns: repeat(53, 20px) !important;
+  }
+}
+
 .dayWrapper {
   position: relative;
+  overflow: visible !important; /* safety */
+}
 
-  .day {
-    border-radius: 2px;
-    transition: background-color 0.2s;
-    cursor: pointer;
-    width: inherit;
-    height: auto;
-    aspect-ratio: 1/1;
-  }
+.dayWrapper .day {
+  border-radius: 2px;
+  transition: background-color 0.2s;
+  cursor: pointer;
+  width: inherit;
+  height: auto;
+  aspect-ratio: 1/1;
+}
 
-  .day:hover {
-    outline: 1px solid #333;
-  }
+.dayWrapper .day:hover {
+  outline: 1px solid #333;
+}
 
-  .day:hover::after {
-    content: attr(title);
-    position: absolute;
-    left: 50%;
-    bottom: 100%;
-    transform: translateX(-50%);
-    white-space: pre; // preserves line breaks
-    background: #1a1a2e;
-    color: #fff;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    pointer-events: none;
-    z-index: 10;
-    text-transform: capitalize;
-    overflow: visible !important;
-  }
+.dayWrapper .day:hover::after {
+  content: attr(title);
+  position: absolute;
+  left: 50%;
+  bottom: 100%;
+  transform: translateX(-50%);
+  white-space: pre;
+  background: #1a1a2e;
+  color: #fff;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 9999;
+  overflow: visible !important;
 }
 
 .legend {
   display: flex;
-  justify-content: center; // center the legend
+  justify-content: center;
   align-items: center;
   align-self: flex-start;
   margin-top: 16px;
+}
 
-  .legendItem {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 0 4px;
-
-    .legendColor {
-      width: 14px;
-      height: 14px;
-      border-radius: 2px;
-      margin-bottom: 2px;
-    }
-
-    span {
-      font-size: 12px;
-    }
-  }
+.legend .legendItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0 4px;
+}
+
+.legend .legendColor {
+  width: 14px;
+  height: 14px;
+  border-radius: 2px;
+  margin-bottom: 2px;
+}
+
+.legend span {
+  font-size: 12px;
 }
 
 .box {
@@ -131,14 +140,13 @@
   display: grid;
   place-items: center;
   transition: 0.3s;
-  background-color: #1a1b2b; // subtle background for better contrast
+  background-color: #1a1b2b;
 }
 
 .elementBox p {
   font-size: 1.2em;
   text-align: center !important;
   text-transform: capitalize;
-  padding: 0;
   margin-top: 2px;
 }
 
@@ -155,17 +163,7 @@
   text-transform: capitalize;
 }
 
-.elementBox ul li {
-  text-transform: capitalize;
-}
-
 .elementBox:hover {
   box-shadow: 16px 16px 16px rgba(0, 0, 0, 0.6);
   transform: scale(1.02);
 }
-
-.elementBox ul {
-  margin-top: 0.5em;
-  padding-left: 0;
-  list-style: none;
-}