From ac5cdc44b28e4d29ba7c8845453af31d8be217ef Mon Sep 17 00:00:00 2001
From: ArshVermaGit <arshverma.dev@gmail.com>
Date: Sat, 30 May 2026 01:58:18 +0530
Subject: [PATCH] fix(ui): improve responsive layout for data-heavy components

---
 src/components/ContributionHeatmap.tsx | 8 ++++----
 src/components/FriendComparison.tsx    | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/ContributionHeatmap.tsx b/src/components/ContributionHeatmap.tsx
index f177a9ec7..d92231c74 100644
--- a/src/components/ContributionHeatmap.tsx
+++ b/src/components/ContributionHeatmap.tsx
@@ -329,8 +329,8 @@ export default function ContributionHeatmap({
 };
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
-      <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
+    <div className="w-full overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 sm:p-6 shadow-sm">
+      <div className="mb-4 flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center justify-between gap-4 sm:gap-2">
         <div>
           <h2 className="text-lg font-semibold text-[var(--card-foreground)] dark:text-white">Contribution Heatmap</h2>          
           <p className="text-sm text-[var(--muted-foreground)] dark:text-gray-300">
@@ -338,9 +338,9 @@ export default function ContributionHeatmap({
           </p>
         </div>
 
-        <div className="flex flex-wrap items-center gap-2">
+        <div className="flex flex-col sm:flex-row flex-wrap items-start sm:items-center gap-2">
           {/* Range buttons */}
-          <div className="flex gap-1 rounded-lg border border-[var(--border)] bg-[var(--background)] p-1">
+          <div className="flex flex-wrap gap-1 rounded-lg border border-[var(--border)] bg-[var(--background)] p-1">
             {PRESET_RANGES.map((r) => (
               <button
                 key={r.days}
diff --git a/src/components/FriendComparison.tsx b/src/components/FriendComparison.tsx
index a484ac9db..775c9d53f 100644
--- a/src/components/FriendComparison.tsx
+++ b/src/components/FriendComparison.tsx
@@ -193,7 +193,7 @@ export default function FriendComparison() {
   };
 
   return (
-    <div className="rounded-xl border border-[var(--border)] bg-[var(--card)] p-6 shadow-sm">
+    <div className="w-full overflow-hidden rounded-xl border border-[var(--border)] bg-[var(--card)] p-4 sm:p-6 shadow-sm">
       <div className="mb-6 space-y-4">
         <div className="flex items-center justify-between gap-3">
           <h2 className="text-lg font-semibold text-[var(--card-foreground)]">
@@ -374,11 +374,11 @@ export default function FriendComparison() {
             />
           )}
 
-          <div className="flex justify-center items-center gap-3 pt-4">
+          <div className="flex flex-col sm:flex-row justify-center items-stretch sm:items-center gap-3 pt-4">
             <a
               href="#contribution-activity"
               onClick={handleCommitActivityClick}
-              className="rounded-full bg-[var(--control)] px-4 py-2 text-sm text-[var(--foreground)] transition-colors hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]"
+              className="text-center rounded-full bg-[var(--control)] px-4 py-2 text-sm text-[var(--foreground)] transition-colors hover:bg-[var(--accent)] hover:text-[var(--accent-foreground)]"
             >
               View Commit Activity
             </a>