Mobile experience enhancements: fixed fog texture, padding adjustments, and dvh support

src/app/globals.css

@@ -189,6 +189,7 @@
     letter-spacing: var(--tracking-normal);
     background-color: transparent;
     min-height: 100vh;
+    min-height: 100dvh;
     overflow-x: hidden;
   }
 

src/components/Dashboard.tsx

@@ -219,7 +219,7 @@ export function Dashboard({ user }: DashboardProps) {
     <div className="min-h-screen">
       <UserHeader user={user} preferences={preferences} />
 
-      <main className="container mx-auto px-4 py-8">
+      <main className="container mx-auto px-4 py-8 pb-24 sm:pb-8">
         {preferences && (
           <>
             {/* Floating Log Button */}

src/components/UsageCalendar.tsx

@@ -213,7 +213,7 @@ export function UsageCalendar({ usageData, onDataUpdate, religion, onReligionUpd
   return (
     <>
       <Card className="bg-card/80 backdrop-blur-xl shadow-xl drop-shadow-lg hover-lift transition-all duration-300 border-white/10 overflow-hidden">
-        <CardContent className="p-1 sm:p-6">
+        <CardContent className="p-3 sm:p-6">
           <div className="flex flex-col lg:flex-row gap-4">
             {/* Calendar */}
             <div className="w-full lg:w-auto overflow-x-auto block">