From 1eeab2a18e740e651267a43c6b43ac90b754cb96 Mon Sep 17 00:00:00 2001
From: SonalMittal-14 <sonalmittal140103@gmail.com>
Date: Wed, 27 May 2026 21:23:15 +0530
Subject: [PATCH] fix: wrap dashboard action buttons on mobile

---
 src/app/dashboard/page.tsx      | 34 +++++++++++++++++----------------
 src/components/ExportButton.tsx |  6 +++---
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 617bea420..0489e0a3f 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -107,22 +107,24 @@ export default async function DashboardPage() {
     <DashboardSSEProvider>
       <div className="min-h-screen bg-[var(--background)] p-4 text-[var(--foreground)] transition-colors md:p-8">
         <DashboardHeader />
-      <div className="mb-6 flex justify-end items-center gap-2">
-        <Link
-          href="/wrapped"
-          className="rounded-lg border border-[var(--accent)] bg-[var(--accent-soft)] px-4 py-2 text-sm font-semibold text-[var(--accent)] hover:opacity-90 transition-opacity min-w-[140px] flex items-center justify-center"
-        >
-          Year in Code
-        </Link>
-        <Link
-          href="/dashboard/settings"
-          className="secondary-button flex min-w-[140px] items-center justify-center rounded-xl px-4 py-2 text-sm font-medium"
-        >
-          Settings
-        </Link>
-        <ExportButton />
-      </div>
-      <StreakAtRiskBanner />
+        <div className="mb-6 flex flex-wrap items-stretch justify-center gap-2 sm:justify-end">
+          <Link
+            href="/wrapped"
+            className="flex min-w-0 flex-1 items-center justify-center rounded-lg border border-[var(--accent)] bg-[var(--accent-soft)] px-4 py-2 text-center text-sm font-semibold text-[var(--accent)] transition-opacity hover:opacity-90 sm:min-w-[140px] sm:flex-none"
+          >
+            Year in Code
+          </Link>
+          <Link
+            href="/dashboard/settings"
+            className="secondary-button flex min-w-0 flex-1 items-center justify-center rounded-xl px-4 py-2 text-center text-sm font-medium sm:min-w-[140px] sm:flex-none"
+          >
+            Settings
+          </Link>
+          <div className="w-full sm:w-auto">
+            <ExportButton />
+          </div>
+        </div>
+        <StreakAtRiskBanner />
 
       <div className="mb-6 mt-6">
         <Link href="/wrapped">
diff --git a/src/components/ExportButton.tsx b/src/components/ExportButton.tsx
index a5917021c..4faf7a53b 100644
--- a/src/components/ExportButton.tsx
+++ b/src/components/ExportButton.tsx
@@ -656,12 +656,12 @@ export default function ExportButton() {
   };
 
   return (
-    <div className="flex gap-3">
+    <div className="flex w-full flex-wrap gap-2 sm:w-auto sm:flex-nowrap sm:justify-end">
       <button
         type="button"
         onClick={exportCSV}
         disabled={isExportingCSV}
-        className="px-4 py-2 bg-[var(--control)] border border-[var(--border)] text-[var(--card-foreground)] hover:border-[var(--accent)] rounded-lg text-sm font-medium transition-colors flex items-center gap-2 disabled:opacity-50 min-w-[140px] justify-center"
+        className="flex min-w-0 flex-1 items-center justify-center gap-2 rounded-lg border border-[var(--border)] bg-[var(--control)] px-4 py-2 text-sm font-medium text-[var(--card-foreground)] transition-colors hover:border-[var(--accent)] disabled:opacity-50 sm:min-w-[140px] sm:flex-none"
       >
         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
@@ -673,7 +673,7 @@ export default function ExportButton() {
         type="button"
         onClick={exportPDF}
         disabled={isExportingPDF}
-        className="px-4 py-2 bg-[var(--accent)] text-[var(--accent-foreground)] hover:opacity-90 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 disabled:opacity-50 min-w-[140px] justify-center"
+        className="flex min-w-0 flex-1 items-center justify-center gap-2 rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-[var(--accent-foreground)] transition-colors hover:opacity-90 disabled:opacity-50 sm:min-w-[140px] sm:flex-none"
       >
         <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />