refactor(ui): mobile-first pass on shared chrome + shadcn Field wrapper

- Field.tsx re-added composing shadcn Label (no built-in equivalent
  in this CLI generation).
- Bumped Input/Textarea to h-12/rounded-xl/px-4 (44px+ touch targets,
  matches the app's existing rounded, roomy input style).
- Card padding restored to the old flat p-5 sm:p-6 default so most
  call sites (`<Card>children</Card>`) don't need CardContent
  wrapping; CardHeader/Content/Footer still exported for the few
  structured cards.
- Swapped literal pink-500/gray-100 focus/border colors for
  text-primary / border-border / ring-ring tokens in Footer and
  CalendarButtons so brand color flows from the CSS vars.
- min-h-screen -> min-h-[100dvh] on full-bleed screens (home,
  create, not-found) so mobile browser chrome doesn't clip content.
- Responsive type scale (text-4xl sm:text-5xl md:text-6xl, etc.)
  instead of a single jump at md:, so headings don't overflow on
  narrow phones.
- Root layout now mounts <Toaster> and uses bg-background/
  text-foreground (background token matches the previous gray-50).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-07-29 19:42:48 +02:00
parent 9976542438
commit 5f736525fb
11 changed files with 59 additions and 33 deletions
+5 -5
View File
@@ -4,12 +4,12 @@ export const metadata = { title: 'Create a proposal, no account needed' };
export default function CreatePage() {
return (
<div className="min-h-screen bg-gradient-to-br from-orange-400 via-pink-500 to-rose-500 py-10 px-4">
<div className="min-h-[100dvh] bg-gradient-to-br from-orange-400 via-pink-500 to-rose-500 py-6 sm:py-10 px-4">
<div className="max-w-2xl mx-auto">
<div className="text-center mb-8 text-white">
<div className="text-5xl mb-3">💌</div>
<h1 className="font-display text-3xl font-extrabold mb-1 text-balance">Create your proposal</h1>
<p className="text-white/80 text-balance">No account needed, you get two private links when you&apos;re done.</p>
<div className="text-center mb-6 sm:mb-8 text-white">
<div className="text-4xl sm:text-5xl mb-2 sm:mb-3">💌</div>
<h1 className="font-display text-2xl sm:text-3xl font-extrabold mb-1 text-balance">Create your proposal</h1>
<p className="text-white/80 text-balance text-sm sm:text-base">No account needed, you get two private links when you&apos;re done.</p>
</div>
<CreateClient />
</div>