ui fixes yooooooo

client/app/page.tsx

@@ -104,67 +104,69 @@ const Home = () => {
   const currentTheme = VSCODE_THEMES[currentThemeIndex];
 
   return (
-    <div className="relative min-h-screen flex items-center justify-center bg-background dark:bg-background ui-font">
-      <Card className="relative z-10 px-6 md:px-12 py-12 md:py-24 backdrop-blur-sm shadow-lg bg-card/0 bg-opacity-0 dark:bg-card/70 border border-border dark:border-border flex flex-col items-center">
-        <div className="flex flex-col items-center">
-          <h1 className="text-6xl md:text-8xl translate-x-1.5 font-bold text-foreground mb-4">
-            Osborne
-          </h1>
-        </div>
-
-        {/* Theme Switcher - Pill Button */}
-        <div className="mb-12">
-          <button
-            onClick={nextTheme}
-            className="px-4 min-w-36 py-2 bg-muted hover:bg-muted/80 rounded-full text-sm font-medium text-foreground transition-colors border border-border/50 hover:border-border"
-            aria-label="Switch to next theme"
-          >
-            {currentTheme.name}
-          </button>
-        </div>
-
-        <CardContent className="flex flex-col items-center space-y-4 ui-font">
-          <InputOTP
-            value={newRoomCode}
-            onChange={(value) => setNewRoomCode(value.toUpperCase())}
-            maxLength={6}
-            pattern="[A-Z0-9]*"
-            inputMode="text"
-          >
-            <InputOTPGroup>
-              {[...Array(6)].map((_, index) => (
-                <InputOTPSlot key={index} index={index} className="otp-input" />
-              ))}
-            </InputOTPGroup>
-          </InputOTP>
-          <span className="text-xl text-foreground/70 ui-font font-medium">
-            or
-          </span>
-          <Button
-            onClick={createNewRoom}
-            variant="default"
-            className="w-min bg-primary text-primary-foreground text-xl font-semibold hover:bg-primary/80 ui-font px-6 py-3"
-          >
-            Create Room
-          </Button>
-
-          {/* Attribution */}
-          <div className="mt-6 pt-4 border-t border-border/50">
-            <p className="text-sm text-muted-foreground text-center">
-              made with <Heart className="inline w-4 h-4 text-red-500 mx-1" />{" "}
-              by{" "}
-              <a
-                href="https://webark.in"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-primary hover:underline font-medium"
-              >
-                WebArk
-              </a>
-            </p>
+    <div className="relative min-h-dvh flex flex-col items-center justify-between bg-background dark:bg-background ui-font">
+      <main className="flex-grow flex items-center justify-center">
+        <Card className="relative z-10 px-6 md:px-12 py-12 md:py-24 backdrop-blur-sm shadow-lg bg-card/0 bg-opacity-0 dark:bg-card/70 border border-border dark:border-border flex flex-col items-center">
+          <div className="flex flex-col items-center">
+            <h1 className="text-6xl md:text-8xl translate-x-1.5 font-bold text-foreground mb-6 md:mb-8">
+              Osborne
+            </h1>
           </div>
-        </CardContent>
-      </Card>
+
+          {/* Theme Switcher - Pill Button */}
+          <div className="mb-6 md:mb-8">
+            <button
+              onClick={nextTheme}
+              className="px-4 min-w-36 py-2 bg-muted hover:bg-muted/80 rounded-full text-sm font-medium text-foreground transition-colors border border-border/50 hover:border-border"
+              aria-label="Switch to next theme"
+            >
+              {currentTheme.name}
+            </button>
+          </div>
+
+          <CardContent className="flex flex-col items-center space-y-4 ui-font">
+            <InputOTP
+              value={newRoomCode}
+              onChange={(value) => setNewRoomCode(value.toUpperCase())}
+              maxLength={6}
+              pattern="[A-Z0-9]*"
+              inputMode="text"
+            >
+              <InputOTPGroup>
+                {[...Array(6)].map((_, index) => (
+                  <InputOTPSlot key={index} index={index} className="otp-input" />
+                ))}
+              </InputOTPGroup>
+            </InputOTP>
+            <span className="text-xl text-foreground/70 ui-font font-medium">
+              or
+            </span>
+            <Button
+              onClick={createNewRoom}
+              variant="default"
+              className="w-min bg-primary text-primary-foreground text-xl font-semibold hover:bg-primary/80 ui-font px-6 py-3"
+            >
+              Create Room
+            </Button>
+
+            {/* Attribution */}
+            <div className="mt-6 pt-4 border-t border-border/50">
+              <p className="text-sm text-muted-foreground text-center">
+                made with <Heart className="inline w-4 h-4 text-red-500 mx-1" />{" "}
+                by{" "}
+                <a
+                  href="https://webark.in"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline font-medium"
+                >
+                  WebArk
+                </a>
+              </p>
+            </div>
+          </CardContent>
+        </Card>
+      </main>
       <LegalFooter
         onDisclaimerOpen={() => setIsDisclaimerOpen(true)}
         onDMCAOpen={() => setIsDMCAOpen(true)}