Finn/talk-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ensure layout works at 360px minimum viewport width

Browse Source 
- Store badges: w-full on mobile, sm:w-[260px] on larger screens
- AppPreview phone: w-full with aspect-ratio on mobile, fixed size on lg
- UseCases rows: stack vertically on mobile (flex-col sm:flex-row)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-12 17:45:23 +08:00
parent ede669051b
commit b0329e3863
4 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/UseCases.astro
View File

@@ -7,14 +7,14 @@ const rows = [
]
---
<section id="use-cases" class="bg-[#fef0eb] w-full flex items-start justify-center px-[130px] py-[120px]">
<div class="flex gap-[40px] items-center w-[1280px]">
<section id="use-cases" class="bg-[#fef0eb] w-full flex items-start justify-center py-16 lg:py-[120px] px-4 lg:px-[130px]">
<div class="flex flex-col lg:flex-row lg:gap-[40px] lg:items-center gap-8 w-full max-w-[1280px] mx-auto">
<!-- Left: heading -->
<div class="flex flex-col gap-[24px] items-start overflow-clip shrink-0 w-[540px]">
<div class="flex flex-col gap-[24px] items-start overflow-clip shrink-0 w-full lg:w-[540px] lg:shrink-0">
<div class="bg-white border border-[#fbbfa3] flex items-center justify-center px-[24px] py-[12px] rounded-[9999px] shrink-0">
<span class="font-bold text-[#f08458] text-[14px] text-center tracking-[-0.04px] whitespace-nowrap leading-normal">USE CASES</span>
</div>
<p class="font-bold text-[#1a1a1a] text-[48px] tracking-[-1.16px] leading-[1.2] w-full">
<p class="font-bold text-[#1a1a1a] text-[32px] md:text-[40px] lg:text-[48px] tracking-[-1.16px] leading-[1.2] w-full">
Made for Personal, Social, and Community Communication
</p>
<p class="font-normal text-[#7a726d] text-[18px] tracking-[-0.33px] leading-[1.5] w-full">
@@ -25,11 +25,11 @@ const rows = [
<!-- Right: rows -->
<div class="flex flex-1 flex-col items-start min-w-0 overflow-clip rounded-[30px] gap-px">
{rows.map(row => (
<div class="bg-[#faede8] flex h-[120px] items-center overflow-clip w-full shrink-0">
<div class="bg-[#f08458] flex h-full items-center px-[36px] py-[24px] shrink-0 w-[300px]">
<p class="flex-1 font-semibold text-[20px] text-white tracking-[-0.6px] leading-normal min-w-0">{row.title}</p>
<div class="bg-[#faede8] flex flex-col sm:flex-row sm:h-[120px] items-stretch overflow-clip w-full shrink-0">
<div class="bg-[#f08458] flex items-center px-[24px] sm:px-[36px] py-[16px] sm:py-[24px] shrink-0 w-full sm:w-[300px]">
<p class="flex-1 font-semibold text-[18px] sm:text-[20px] text-white tracking-[-0.6px] leading-normal min-w-0">{row.title}</p>
</div>
<div class="bg-white flex flex-1 h-full items-center min-w-0 px-[36px] py-[24px]">
<div class="bg-white flex flex-1 items-center min-w-0 px-[24px] sm:px-[36px] py-[16px] sm:py-[24px]">
<p class="font-medium text-[#7a726d] text-[15px] leading-[1.5] flex-1 min-w-0">{row.desc}</p>
</div>
</div>