mirror of
https://github.com/supabase/supabase.git
synced 2026-10-11 04:15:04 +03:00
Ali Waseem
9c716a6a48
Closes [FE-3040](https://linear.app/supabase/issue/FE-3040/fix-paused-project-dashboard-view-on-mobile) ## Summary The paused project dashboard card was locked to a fixed `w-[40rem]` (640px) width, causing horizontal overflow on mobile viewports. The Resume project button was pushed off-screen, which drove users into Project Settings → General, where the only visible action (Restart) is disabled for paused projects. ## Changes - `ProjectPausedState` card: `w-[40rem]` → `w-full max-w-[40rem]` - `CardFooter`: added `flex-wrap` so Resume + Upgrade-to-Pro/View-settings buttons stay visible on narrow screens - `PauseDisabledState` export-data footer: stacks on mobile, row layout on `sm:`+ - Parent wrappers (`ProjectLayout/index.tsx`, `Home.tsx`): added `px-4` so the card has breathing room from viewport edges ## Follow-up (not in this PR) The Linear issue also suggests adding a Resume action (or differentiated messaging) to Project Settings → General's "Project availability" section, so users who land there on a paused project have a clear path forward. Happy to tackle that separately. ## Test plan - [x] Paused Free-plan project on mobile viewport (≤640px): Resume + Upgrade buttons visible, text wraps within the card - [x] Paused Pro-plan project on mobile viewport: Resume + View settings buttons visible - [x] Non-restorable (>90 days paused) project on mobile: Recovery options list readable, "Download backups" dropdown visible and stacks below description - [x] Desktop (≥640px): card still renders at 40rem max width, layout unchanged - [x] Verified via `/project/[ref]` and `/project/[ref]/home` entry points ## Demo <img width="443" height="832" alt="image" src="https://github.com/user-attachments/assets/d5b7713e-c0b5-44e8-82fe-98c3308d5e8b" /> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Added horizontal padding to the paused project state interface and wrapper. * Made the export data section layout responsive, stacking vertically on mobile and horizontally on larger screens. * Updated the paused state card container styling to use responsive width constraints instead of fixed dimensions. * Adjusted footer element spacing, gap sizing, and wrapping behavior. <!-- end of auto-generated comment: release notes by coderabbit.ai -->