copilot/frosty
1
0
Fork 0
Code Issues Pull requests Projects Releases 11 Packages Wiki Activity Actions

enlarge mobile carousel phones and tighten description spacing

Browse source 
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>
This commit is contained in:
Tommy Chow 2026-02-19 02:50:21 -08:00
parent 10e924b4ab
commit 59f5d2cb81
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
web/src/app/page.tsx
View file

@ -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}