Upscale nav buttons and tighten mobile dashboard layout to prevent overscroll and empty space

src/app/globals.css

@@ -644,16 +644,18 @@
   .swipe-container {
     display: flex;
     overflow-x: auto;
+    overflow-y: hidden;
     scroll-snap-type: x mandatory;
     scroll-behavior: smooth;
     -webkit-overflow-scrolling: touch;
     scrollbar-width: none;
     -ms-overflow-style: none;
     gap: 1.25rem;
-    padding: 1rem 0 2.5rem;
+    padding: 0.5rem 0 1.5rem;
     margin: 0 -1rem;
     padding-left: 1.5rem;
     padding-right: 1.5rem;
+    overscroll-behavior-x: contain;
   }
 
   .swipe-container::-webkit-scrollbar {
@@ -661,7 +663,9 @@
   }
 
   .swipe-item {
-    flex: 0 0 88vw;
+    flex: 0 0 calc(100vw - 3rem);
+    width: calc(100vw - 3rem);
     scroll-snap-align: center;
+    height: fit-content;
   }
 }

src/components/Dashboard.tsx

@@ -240,11 +240,11 @@ export function Dashboard({ user }: DashboardProps) {
     <div className="min-h-screen">
       <UserHeader user={user} preferences={preferences} />
 
-      <main className="container mx-auto px-4 py-8 pb-24 sm:pb-8">
+      <main className="container mx-auto px-4 py-4 sm:py-8 pb-4 sm:pb-8 max-w-full">
         {preferences && (
           <>
             {/* Floating Log Button */}
-            <div className="fixed bottom-4 right-4 sm:bottom-6 sm:right-6 z-50 opacity-0 animate-scale-in delay-500">
+            <div className="fixed bottom-6 right-6 z-50 opacity-0 animate-scale-in delay-500 sm:block">
               <Button
                 size="lg"
                 onClick={() => setShowUsagePrompt(true)}
@@ -256,31 +256,33 @@ export function Dashboard({ user }: DashboardProps) {
             </div>
 
             {/* Dashboard Sections */}
-            <div className="space-y-10 sm:space-y-12 relative">
-              {/* Mobile Navigation Buttons */}
+            <div className="space-y-6 sm:space-y-12 relative overflow-hidden">
+              {/* Mobile Navigation Buttons - LARGE */}
               <div className="sm:hidden">
                 {currentPage > 0 && (
                   <button
                     onClick={() => scrollToPage(currentPage - 1)}
-                    className="fixed left-2 top-1/2 -translate-y-1/2 z-[60] p-3 rounded-full glass border border-white/10 shadow-2xl active:scale-90 transition-all duration-300 group"
+                    className="fixed left-3 top-[55%] -translate-y-1/2 z-[60] p-5 rounded-full glass border border-white/20 shadow-2xl active:scale-90 transition-all duration-300 group"
                     style={{
-                      background: theme === 'light' ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.4)',
-                      backdropFilter: 'blur(12px)'
+                      background: theme === 'light' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.6)',
+                      backdropFilter: 'blur(16px)',
+                      boxShadow: '0 8px 32px rgba(0,0,0,0.2)'
                     }}
                   >
-                    <ChevronLeft className="h-6 w-6 text-primary group-hover:scale-110" />
+                    <ChevronLeft className="h-8 w-8 text-primary group-hover:scale-110" />
                   </button>
                 )}
                 {currentPage < 3 && (
                   <button
                     onClick={() => scrollToPage(currentPage + 1)}
-                    className="fixed right-2 top-1/2 -translate-y-1/2 z-[60] p-3 rounded-full glass border border-white/10 shadow-2xl active:scale-90 transition-all duration-300 group"
+                    className="fixed right-3 top-[55%] -translate-y-1/2 z-[60] p-5 rounded-full glass border border-white/20 shadow-2xl active:scale-90 transition-all duration-300 group"
                     style={{
-                      background: theme === 'light' ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.4)',
-                      backdropFilter: 'blur(12px)'
+                      background: theme === 'light' ? 'rgba(255, 255, 255, 0.85)' : 'rgba(0, 0, 0, 0.6)',
+                      backdropFilter: 'blur(16px)',
+                      boxShadow: '0 8px 32px rgba(0,0,0,0.2)'
                     }}
                   >
-                    <ChevronRight className="h-6 w-6 text-primary group-hover:scale-110" />
+                    <ChevronRight className="h-8 w-8 text-primary group-hover:scale-110" />
                   </button>
                 )}
               </div>

src/components/UserHeader.tsx

@@ -250,15 +250,14 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
           {/* CENTER: Title and Welcome Message */}
           <div className="flex-[2] flex flex-col items-center justify-center text-center">
             <h1
-              className="text-xl sm:text-2xl font-bold cursor-pointer transition-all duration-300 hover:scale-105 tracking-tight leading-tight"
+              className={cn(
+                "text-xl sm:text-2xl font-bold cursor-pointer transition-all duration-300 hover:scale-105 tracking-tight leading-tight bg-clip-text text-transparent w-fit mx-auto",
+                theme === 'light'
+                  ? 'bg-gradient-to-br from-[#4f46e5] to-[#7c3aed]'
+                  : 'bg-gradient-to-br from-[#a78bfa] to-[#f472b6]'
+              )}
               onClick={() => handleNavigate('/')}
               style={{
-                background: theme === 'light'
-                  ? 'linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%)'
-                  : 'linear-gradient(135deg, #a78bfa 0%, #f472b6 100%)',
-                WebkitBackgroundClip: 'text',
-                WebkitTextFillColor: 'transparent',
-                backgroundClip: 'text',
                 filter: theme === 'dark' ? 'drop-shadow(0 0 10px rgba(167, 139, 250, 0.3))' : 'none'
               }}
             >