From c8b77a77acff69d6983e7d9a91f2e103991c9608 Mon Sep 17 00:00:00 2001
From: Harkamal Randhawa <harkamalsr@gmail.com>
Date: Sun, 24 May 2026 05:29:12 -0600
Subject: [PATCH] Refine landing pet scale and login forgot-password link.

Size the homepage pet from LCD height instead of width alone, and soften the forgot-password link so it reads secondary to the password label.
---
 app/globals.css                            |  7 ++++-
 components/landing/landing-pet-preview.tsx | 33 +++++++++++++++++-----
 components/login-form.tsx                  |  2 +-
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 4e9a4d4..423b662 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -126,7 +126,12 @@
   /* Landing hero preview: cap LCD height on narrow viewports */
   .tamagotchi-lcd-landing {
     @apply aspect-[4/3] w-full shrink-0;
-    max-height: clamp(140px, 42vw, 280px);
+    max-height: clamp(120px, 36vw, 240px);
+  }
+
+  .tamagotchi-lcd-landing > div.absolute svg {
+    width: 1rem;
+    height: 1rem;
   }
 
   .pet-viewport-stage {
diff --git a/components/landing/landing-pet-preview.tsx b/components/landing/landing-pet-preview.tsx
index 0516eda..bf9613b 100644
--- a/components/landing/landing-pet-preview.tsx
+++ b/components/landing/landing-pet-preview.tsx
@@ -29,15 +29,33 @@ function LandingPetPreviewSkeleton() {
   );
 }
 
-function computeLandingPetScale(lcdWidth: number): number {
-  return Math.min(7, Math.max(4, Math.round(lcdWidth / 36)));
+const SPRITE_HEIGHT = 32;
+const SPRITE_WIDTH = 16;
+/** Target rendered pet height as a fraction of LCD height */
+const TARGET_HEIGHT_RATIO = 0.42;
+/** Keep pet from spanning too much of the LCD width */
+const TARGET_WIDTH_RATIO = 0.2;
+
+function computeLandingPetScale(lcdWidth: number, lcdHeight: number): number {
+  if (lcdWidth <= 0 || lcdHeight <= 0) {
+    return 4;
+  }
+
+  const scaleFromHeight = Math.round(
+    (lcdHeight * TARGET_HEIGHT_RATIO) / SPRITE_HEIGHT,
+  );
+  const scaleFromWidth = Math.round(
+    (lcdWidth * TARGET_WIDTH_RATIO) / SPRITE_WIDTH,
+  );
+
+  return Math.min(5, Math.max(2, Math.min(scaleFromHeight, scaleFromWidth)));
 }
 
 export function LandingPetPreview() {
   const resizeObserverRef = useRef<ResizeObserver | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [isSignedIn, setIsSignedIn] = useState(false);
-  const [petScale, setPetScale] = useState(7);
+  const [petScale, setPetScale] = useState(4);
   const [customization, setCustomization] = useState<AvatarCustomization>(
     defaultAvatarCustomization,
   );
@@ -50,16 +68,17 @@ export function LandingPetPreview() {
       return;
     }
 
-    const updateScale = (width: number) => {
-      setPetScale(computeLandingPetScale(width));
+    const updateScale = (width: number, height: number) => {
+      setPetScale(computeLandingPetScale(width, height));
     };
 
-    updateScale(node.getBoundingClientRect().width);
+    const rect = node.getBoundingClientRect();
+    updateScale(rect.width, rect.height);
 
     const observer = new ResizeObserver((entries) => {
       const entry = entries[0];
       if (entry) {
-        updateScale(entry.contentRect.width);
+        updateScale(entry.contentRect.width, entry.contentRect.height);
       }
     });
 
diff --git a/components/login-form.tsx b/components/login-form.tsx
index 5f45b98..155250a 100644
--- a/components/login-form.tsx
+++ b/components/login-form.tsx
@@ -77,7 +77,7 @@ export function LoginForm({
                   <Label htmlFor="password">Password</Label>
                   <Link
                     href="/auth/forgot-password"
-                    className="ml-auto inline-block text-sm underline-offset-4 hover:underline"
+                    className="ml-auto shrink-0 text-xs text-muted-foreground/70 underline-offset-4 hover:text-muted-foreground hover:underline"
                   >
                     Forgot your password?
                   </Link>