From 0ca9b14661a4e53784dd2b8f1274c56126ab891c Mon Sep 17 00:00:00 2001
From: dvorakmortonxd <lolmanikyt@gmail.com>
Date: Tue, 19 May 2026 12:01:20 +0200
Subject: [PATCH] fixed a bug with mobile devices that makes it so the commit
 date in the contribution section overlaps thru the tui border

---
 src/app/components/ContributionHeatmap.tsx |  30 ++---
 src/app/page.css                           | 133 +++++++++++++++++++++
 2 files changed, 149 insertions(+), 14 deletions(-)

diff --git a/src/app/components/ContributionHeatmap.tsx b/src/app/components/ContributionHeatmap.tsx
index ddfb5ed..3ec68ad 100644
--- a/src/app/components/ContributionHeatmap.tsx
+++ b/src/app/components/ContributionHeatmap.tsx
@@ -125,9 +125,9 @@ export default function ContributionHeatmap() {
   }
 
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "10px", width: "100%" }}>
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-        <div style={{ fontSize: "0.85rem", color: "var(--fg)" }}>
+    <div className="contribution-heatmap">
+      <div className="contribution-command-row">
+        <div className="contribution-command">
           <span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ echo &#34;<span style={{ color: "var(--prettypurple)" }}>{totalContribs}</span> contributions in the last year&#34;
         </div>
       </div>
@@ -149,15 +149,15 @@ export default function ContributionHeatmap() {
           </div>
         ))}
       </div>
-      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "0.75rem", color: "var(--gray)", marginTop: "4px" }}>
-        <div>
+      <div className="heatmap-status-row">
+        <div className="heatmap-status-text">
           {hoveredCell ? (
             <span><strong style={{ color: "var(--prettypurple)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span>
           ) : (
             <span>Hover over a day to see contributions</span>
           )}
         </div>
-        <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+        <div className="heatmap-legend">
           <span>Less</span>
           <div className="heatmap-legend-cell" data-level="0"></div>
           <div className="heatmap-legend-cell" data-level="1"></div>
@@ -169,8 +169,8 @@ export default function ContributionHeatmap() {
       </div>
 
       {activities.length > 0 && (
-        <div>
-          <div style={{ fontSize: "0.85rem", color: "var(--fg)", marginBottom: "4px" }}>
+        <div className="contribution-log">
+          <div className="contribution-command contribution-log-command">
             <span style={{ color: "var(--green)" }}>martin@git.dvorakmortonxd.dev</span>:<span style={{ color: "var(--gray)" }}>~</span>$ git log -n 3 <span style={{ color: "var(--gray)" }}>#displays my 3 latest contributions</span>
           </div>
           {activities.map((act, idx) => {
@@ -186,15 +186,17 @@ export default function ContributionHeatmap() {
               }
             } catch {}
 
+            const created = new Date(act.created);
+
             return (
-              <div key={idx} style={{ display: "flex", flexDirection: "column", fontSize: "0.8rem", color: "var(--fg)" }}>
-                <div style={{ display: "flex", justifyContent: "space-between", color: "var(--white)" }}>
-                  <span>repo: {act.repo?.full_name || "unknown"}</span>
-                  <span style={{ color: "var(--green)", fontSize: "0.67rem" }}>
-                    {new Date(act.created).toLocaleDateString()}-{new Date(act.created).toLocaleTimeString()}
+              <div key={idx} className="contribution-entry">
+                <div className="contribution-entry-header">
+                  <span className="contribution-repo">repo: {act.repo?.full_name || "unknown"}</span>
+                  <span className="contribution-date">
+                    {created.toLocaleDateString()}-{created.toLocaleTimeString()}
                   </span>
                 </div>
-                <div style={{ color: "var(--gray)", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                <div className="contribution-message">
                   {msg}
                 </div>
               </div>
diff --git a/src/app/page.css b/src/app/page.css
index 3fd06a6..5395f82 100644
--- a/src/app/page.css
+++ b/src/app/page.css
@@ -1028,6 +1028,79 @@ body {
 /* ============================================
    HEATMAP
    ============================================ */
+.contribution-heatmap {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.contribution-command-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  min-width: 0;
+}
+
+.contribution-command {
+  min-width: 0;
+  color: var(--fg);
+  font-size: 0.85rem;
+  overflow-wrap: anywhere;
+}
+
+.contribution-log {
+  min-width: 0;
+}
+
+.contribution-log-command {
+  margin-bottom: 4px;
+}
+
+.contribution-entry {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  color: var(--fg);
+  font-size: 0.8rem;
+}
+
+.contribution-entry-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 10px;
+  min-width: 0;
+  color: var(--white);
+}
+
+.contribution-repo {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.contribution-date {
+  flex-shrink: 0;
+  max-width: 48%;
+  color: var(--green);
+  font-size: 0.67rem;
+  line-height: 1.25;
+  text-align: right;
+  overflow-wrap: anywhere;
+}
+
+.contribution-message {
+  min-width: 0;
+  color: var(--gray);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .heatmap-container {
   display: flex;
   width: 100%;
@@ -1037,6 +1110,29 @@ body {
   scrollbar-color: var(--gray) transparent;
 }
 
+.heatmap-status-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  margin-top: 4px;
+  color: var(--gray);
+  font-size: 0.75rem;
+}
+
+.heatmap-status-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.heatmap-legend {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 4px;
+}
+
 .heatmap-week {
   display: flex;
   flex-direction: column;
@@ -1076,3 +1172,40 @@ body {
 .heatmap-legend-cell[data-level="3"] { background-color: rgba(142, 68, 173, 0.8); }
 .heatmap-legend-cell[data-level="4"] { background-color: rgba(142, 68, 173, 1); }
 
+@media (max-width: 520px) {
+  .contribution-command {
+    font-size: 0.72rem;
+    line-height: 1.45;
+  }
+
+  .heatmap-status-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .contribution-entry {
+    font-size: 0.74rem;
+  }
+
+  .contribution-entry-header {
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  .contribution-repo {
+    width: 100%;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  .contribution-date {
+    max-width: 100%;
+    text-align: left;
+    font-size: 0.64rem;
+  }
+
+  .contribution-message {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+}