Skip to content

FIX-MOBILE-RESPONSIVE-ISSUES.md

Latest commit

 

History

History
72 lines (54 loc) · 4.94 KB

FIX-MOBILE-RESPONSIVE-ISSUES.md

File metadata and controls

72 lines (54 loc) · 4.94 KB
Raw

Mobile & Tablet Responsive Tweaks

Context

Tested the site's main pages at mobile (390x844, iPhone 12) and tablet (768x1024, iPad) viewports using Playwright. The site is generally well-built for responsive — it uses sensible Tailwind breakpoints and the layouts scale reasonably. However, there are a few layout issues worth addressing, plus two pre-existing bugs that block the guides and blog article pages.

Pre-existing Bugs (blocking two pages)

1. Guides page crashes — YAML parsing error in sympathy card MDX

  • File: frontend/src/content/guides/what-to-write/sympathy-card.mdx
  • Issue: matter() in src/lib/guides.ts:27 throws YAMLException parsing the frontmatter. The date: 2026-02-19 value is being interpreted as a YAML date literal causing a block mapping parse error. The birthday card has the same format and works, so this may be caused by an invisible character or encoding issue in the file.
  • Fix: Quote the date value: date: '2026-02-19' (and dateModified). Or regenerate the file to eliminate hidden characters.

2. Blog article pages crash — missing export on generateStaticParams

  • File: frontend/src/app/(main)/blog/[slug]/page.tsx:14
  • Issue: function generateStaticParams() is not exported. Next.js requires export function generateStaticParams() for output: 'export' mode.
  • Fix: Add export keyword: export function generateStaticParams()

Responsive Tweaks

3. Home — card showcase: orphaned 3rd card on tablet

  • File: frontend/src/components/home/card-showcase.tsx:57
  • Current: grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 — shows 3 cards in a 2+1 layout on tablet, leaving one card orphaned on a row by itself
  • Tweak: Change to md:grid-cols-2 lg:grid-cols-3 so tablet stays single-column, or show only 2 cards at sm (slice to 2 on smaller screens). Recommended: change breakpoint from sm to md so the 2-col grid only kicks in at 768px+ where it has more room, and use lg:grid-cols-3 for desktop.

4. Home — card showcase: tall cards cause excessive scrolling on mobile

  • File: frontend/src/components/home/card-showcase.tsx:61
  • Current: aspect-[5/7] on each card image — at 390px width, each card is ~550px tall. With 3 cards stacked, users scroll through ~1800px of cards alone.
  • Tweak: Consider showing only 2 cards on mobile (sampleCards.slice(0, 2) at small viewports), or reduce the aspect ratio on mobile (e.g., aspect-[4/5] sm:aspect-[5/7]). Alternatively, switch to a horizontal scroll carousel on mobile.

5. Home — "How it works" stacking on mobile

  • File: frontend/src/components/home/how-it-works.tsx:71
  • Current: grid grid-cols-1 gap-8 sm:grid-cols-3 — each step takes significant vertical space on mobile
  • Tweak: Use a more compact layout on mobile with icon and text side-by-side: flex flex-col sm:grid sm:grid-cols-3 gap-6 sm:gap-8. Each mobile item could use flex flex-row items-start gap-4 to place icon left and text right, reducing vertical footprint.

6. Footer — no wrapping for small screens

  • File: frontend/src/components/layout/footer.tsx:6
  • Current: flex items-center justify-center gap-6 — on very narrow screens (< 360px) the footer items could collide
  • Tweak: Add flex-wrap to the footer container. Optionally reduce gap-6 to gap-4 sm:gap-6 for tighter spacing on mobile. Could also stack vertically on mobile: flex-col sm:flex-row gap-2 sm:gap-6.

7. Create page — excessive whitespace on tablet

  • File: frontend/src/app/(main)/create/page.tsx / frontend/src/components/create/upload-step.tsx
  • Current: Content is narrow (max-w-4xl) and centered, leaving large empty areas on tablet
  • Tweak: This is minor and mostly aesthetic. Could be left as-is since it works fine functionally. If desired, the upload drop zone could expand to fill more width by removing max-width constraints on tablet.

Summary of changes by priority

Priority Change File
P0 - Bug Export generateStaticParams blog/[slug]/page.tsx
P0 - Bug Fix YAML date parsing in sympathy card sympathy-card.mdx
P1 Fix orphaned card on tablet (change sm: to md: breakpoint) card-showcase.tsx
P1 Add flex-wrap to footer footer.tsx
P2 Compact "How it works" on mobile how-it-works.tsx
P2 Reduce card height / count on mobile card-showcase.tsx
P3 Create page whitespace (optional) upload-step.tsx

Verification

  1. pnpm dev and open the site
  2. Use browser devtools responsive mode to test at 390px, 768px, and 1024px
  3. Verify guides page (/guides/what-to-write) loads without error
  4. Verify blog article pages (/blog/[slug]) load without error
  5. Verify card showcase grid looks correct at all breakpoints (no orphaned cards)
  6. Verify footer wraps gracefully at narrow widths
  7. pnpm typecheck and pnpm test pass