Scale landing pet preview for small viewports.

ResizeObserver on the landing LCD drives pet sprite scale while capping LCD height so the hero preview stays proportional on mobile.
2026-05-24 05:15:37 -06:00
parent 0b309fbc24
commit 2b76e7f34c
4 changed files with 62 additions and 6 deletions
--- a/app/globals.css
+++ b/app/globals.css
@@ -116,6 +116,12 @@
    max-width: calc(32rem - 2.5rem - 2rem);
  }

+  /* 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);
+  }
+
  .pet-viewport-stage {
    @apply flex min-h-0 w-full flex-1 flex-col items-center justify-center;
  }