From 59f5d2cb817c40c08e775f76fbdec8061bd26316 Mon Sep 17 00:00:00 2001
From: Tommy Chow <tommyxchow@gmail.com>
Date: Thu, 19 Feb 2026 02:50:21 -0800
Subject: [PATCH] enlarge mobile carousel phones and tighten description
 spacing
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Increase mobile phone frame from 192×440 to 240×520 (max-w-60,
max-h-130) with paired aspect-ratio constraints. Widen carousel
step to 260 to maintain gap between slides. Remove py-3 from
phone media to eliminate black letterboxing. Cap track height to
match phone so description stays close via justify-center.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 web/src/app/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 037c8a6a..52af8e85 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -150,7 +150,7 @@ function PhoneMedia({
   }, [isCurrent, media.type])
 
   return (
-    <div className='relative size-full bg-black py-3'>
+    <div className='relative size-full bg-black'>
       {media.type === 'video' ? (
         <video
           ref={videoRef}
@@ -167,7 +167,7 @@ function PhoneMedia({
   )
 }
 
-const STEP_MOBILE = 220
+const STEP_MOBILE = 260
 const STEP_DESKTOP = 370
 const stepQuery = '(min-width: 768px)'
 function subscribeStep(callback: () => void) {
@@ -210,7 +210,7 @@ function Carousel() {
         aria-roledescription='carousel'
         aria-label='App features'
         tabIndex={0}
-        className='relative h-full max-h-120 min-h-0 w-full shrink touch-pan-y overflow-hidden focus-visible:outline-none md:max-h-200'
+        className='relative h-full max-h-130 min-h-0 w-full shrink touch-pan-y overflow-hidden focus-visible:outline-none md:max-h-200'
         onKeyDown={(e) => {
           if (e.key === 'ArrowLeft') {
             e.preventDefault()
@@ -279,7 +279,7 @@ function Carousel() {
                     }
                   : undefined)}
               >
-                <PhoneFrame className='h-full max-h-110 max-w-48 md:max-h-190 md:max-w-88'>
+                <PhoneFrame className='h-full max-h-130 max-w-60 md:max-h-190 md:max-w-88'>
                   <PhoneMedia
                     media={feature.media}
                     title={feature.title}