From f4c3fe0c51d3352bc00ab8ff250e5d6389db413e Mon Sep 17 00:00:00 2001
From: iamkiddy <francisyoungson@gmail.com>
Date: Thu, 13 Nov 2025 11:17:17 +0000
Subject: [PATCH] Refactor User Dashboard layout to improve responsiveness and
 visual consistency. Update button styles for better alignment and flexibility
 in different screen sizes.

---
 app/(user)/user/dashboard/page.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/(user)/user/dashboard/page.tsx b/app/(user)/user/dashboard/page.tsx
index 7f8daed..6fc605f 100644
--- a/app/(user)/user/dashboard/page.tsx
+++ b/app/(user)/user/dashboard/page.tsx
@@ -134,7 +134,7 @@ export default function UserDashboard() {
       {/* Main Content */}
       <main className="container mx-auto px-4 sm:px-6 lg:px-8 space-y-6 pt-20 sm:pt-24 pb-8">
         {/* Welcome Section */}
-        <div className="flex items-center justify-between mb-6">
+        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
           <div>
             <h1 className={`text-2xl font-semibold mb-1 ${isDark ? 'text-white' : 'text-gray-900'}`}>
               Welcome Back!
@@ -144,18 +144,18 @@ export default function UserDashboard() {
             </p>
           </div>
           <div className="flex items-center gap-3">
-            <Link href="/user/settings">
+            <Link href="/user/settings" className="flex-1 sm:flex-initial">
               <Button
                 variant="outline"
-                className={isDark ? 'hover:bg-gray-800 border-gray-700 text-gray-300' : 'hover:bg-gray-100'}
+                className={`w-full sm:w-auto ${isDark ? 'hover:bg-gray-800 border-gray-700 text-gray-300' : 'hover:bg-gray-100'}`}
               >
                 <Settings className="w-4 h-4 mr-2" />
                 Settings
               </Button>
             </Link>
-            <Link href="/book-now">
+            <Link href="/book-now" className="flex-1 sm:flex-initial">
               <Button
-                className="bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
+                className="w-full sm:w-auto bg-gradient-to-r from-rose-500 to-pink-600 hover:from-rose-600 hover:to-pink-700 text-white"
               >
                 <CalendarPlus className="w-4 h-4 mr-2" />
                 Book Appointment