Improved mobile layout

apps/frontend/src/components/header.tsx

@@ -143,7 +143,7 @@ export function Header() {
     <header className="sticky top-0 z-50 w-full border-b border-border/60 bg-background/60 dark:border-primary/20 dark:bg-[#030a10]/90 backdrop-blur-xl">
       <div className="absolute inset-0 -z-10 bg-gradient-to-b from-background/85 to-background/45 dark:from-[#030a10]/95 dark:to-[#030a10]/70" />
 
-      <div className="mx-auto flex h-16 w-full max-w-7xl items-center gap-4 px-4 sm:px-6 lg:px-8">
+      <div className="mx-auto flex h-16 w-full max-w-7xl items-center gap-4 px-3 sm:px-6 lg:px-8">
         <Link to="/" className="group flex items-center gap-3">
           <div className="flex size-10 items-center justify-center  shadow-primary/10 ">
             <img src={PlayzerIcon} alt="Playzer" className="size-7" />

apps/frontend/src/components/layout.tsx

@@ -20,7 +20,7 @@ export function Layout({ children }: LayoutProps) {
         className={
           isMobileHome
             ? 'relative z-10 mx-auto w-full max-w-7xl'
-            : 'relative z-10 mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8'
+            : 'relative z-10 mx-auto w-full max-w-7xl px-3 py-6 sm:px-6 lg:px-8'
         }
       >
         {children}

apps/frontend/src/features/about/about-page.tsx

@@ -1,6 +1,6 @@
 export function AboutPage() {
   return (
-    <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6">
+    <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-3 sm:px-6">
       <section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
         <h2 className="text-2xl font-semibold">About</h2>
         <p className="mt-2 text-sm text-muted-foreground">

apps/frontend/src/features/booking/components/booking-mobile.tsx

@@ -66,7 +66,7 @@ export function BookingMobile() {
   return (
     <div className="min-h-dvh pb-24">
       <MobileTopBar />
-      <div className="space-y-6 px-4 pt-5">
+      <div className="space-y-6 px-3 pt-5">
         <MobilePanelHeader />
         <MobileFilters />
         <MobileSummary />
@@ -155,7 +155,7 @@ function MobileTopBar() {
   };
 
   return (
-    <header className="sticky top-0 z-30 border-b border-border/70 bg-background/85 px-4 py-4 backdrop-blur-xl">
+    <header className="sticky top-0 z-30 border-b border-border/70 bg-background/85 px-3 py-4 backdrop-blur-xl">
       <div className="flex items-center justify-between">
         <div className="flex items-center gap-2.5">
           <img src={PlayzerIcon} alt="Playzer" className="size-9" />
@@ -475,7 +475,7 @@ function MobileCourtDay({
 
   return (
     <div className="min-h-dvh pb-24">
-      <header className="sticky top-0 z-30 border-b border-border/70 bg-background/90 px-4 py-4 backdrop-blur-xl">
+      <header className="sticky top-0 z-30 border-b border-border/70 bg-background/90 px-3 py-4 backdrop-blur-xl">
         <div className="flex items-center justify-between gap-3">
           <Button
             type="button"
@@ -522,7 +522,7 @@ function MobileCourtDay({
         </div>
       </header>
 
-      <main className="space-y-4 px-4 pt-4">
+      <main className="space-y-4 px-3 pt-4">
         <section className="rounded-lg border border-border/70 bg-card/70 p-4">
           <StatusLegend />
         </section>
@@ -534,7 +534,7 @@ function MobileCourtDay({
         </section>
       </main>
 
-      <div className="fixed inset-x-0 bottom-0 z-40 border-t border-border/70 bg-background/90 p-4 backdrop-blur-xl">
+      <div className="fixed inset-x-0 bottom-0 z-40 border-t border-border/70 bg-background/90 p-3 backdrop-blur-xl">
         <Button
           type="button"
           className="h-14 w-full rounded-lg text-base shadow-lg shadow-primary/25"

apps/frontend/src/features/complex/complex-courts-page.tsx

@@ -32,7 +32,7 @@ export function ComplexCourtsPage({ complexSlug }: ComplexCourtsPageProps) {
   });
 
   return (
-    <main className="mx-auto w-full max-w-6xl space-y-6 px-4 py-4 sm:px-6">
+    <main className="mx-auto w-full max-w-6xl space-y-6 py-4">
       <section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
         <h2 className="text-2xl font-semibold">
           {complexQuery.data?.complexName ?? 'Configurar canchas'}

apps/frontend/src/features/complex/complex-settings-page.tsx

@@ -43,7 +43,7 @@ export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
   ];
 
   return (
-    <div className="mx-auto w-full max-w-6xl px-4 py-4 sm:px-6">
+    <div className="mx-auto w-full max-w-6xl py-4">
       <section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
         <h2 className="text-2xl font-semibold">
           <Settings className="mb-1 mr-2 inline size-6" />
@@ -54,7 +54,7 @@ export function ComplexSettingsPage({ complexSlug }: ComplexSettingsPageProps) {
         </p>
       </section>
 
-      <div className="mt-6 grid gap-6 lg:grid-cols-[200px_1fr]">
+      <div className="mt-6 grid gap-5 lg:grid-cols-[200px_1fr] lg:gap-6">
         <nav className="flex flex-row gap-1 overflow-x-auto lg:flex-col lg:overflow-visible">
           {tabs.map((tab) => {
             const Icon = tab.icon;

apps/frontend/src/features/complex/components/complex-courts-section.tsx

@@ -22,7 +22,7 @@ export function ComplexCourtsSection({ complexId }: ComplexCourtsSectionProps) {
   });
 
   return (
-    <section className="mt-6 rounded-xl border bg-card p-5">
+    <section className="mt-6 rounded-xl border bg-card p-3 sm:p-5">
       <div className="flex items-center gap-2">
         <MapPin className="size-5 text-muted-foreground" />
         <h3 className="text-lg font-medium">Canchas</h3>

apps/frontend/src/features/complex/components/court-form-section.tsx

@@ -128,7 +128,7 @@ export function CourtFormSection({
   const buttonText = editingCourt ? 'Guardar cambios' : 'Agregar cancha';
 
   return (
-    <section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5 mb-4">
+    <section className="mb-4 rounded-xl border bg-card p-3 text-card-foreground shadow-sm sm:p-5">
       <h3 className="text-lg font-semibold">{title}</h3>
       <p className="mt-1 text-sm text-muted-foreground">
         Configura nombre, deporte, duración, precio base y horarios. El backend ya contempla precios

apps/frontend/src/features/complex/components/court-list-section.tsx

@@ -18,7 +18,7 @@ export function CourtListSection({
   onEditCourt,
 }: CourtListSectionProps) {
   return (
-    <section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
+    <section className="rounded-xl border bg-card p-3 text-card-foreground shadow-sm sm:p-5">
       <h3 className="text-lg font-semibold">Canchas configuradas</h3>
 
       {isLoading && <p className="mt-3 text-sm text-muted-foreground">Cargando canchas...</p>}
@@ -37,7 +37,7 @@ export function CourtListSection({
 
       <div className="mt-4 space-y-3">
         {courts.map((court) => (
-          <article key={court.id} className="rounded-lg border p-4">
+          <article key={court.id} className="rounded-lg border p-3 sm:p-4">
             <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
               <div>
                 <p className="font-medium">{court.name}</p>

apps/frontend/src/features/login/login-page.tsx

@@ -78,7 +78,7 @@ export function LoginPage({ redirectTo = '/' }: LoginPageProps) {
   };
 
   return (
-    <main className="flex min-h-screen w-full items-center justify-center px-6">
+    <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
       <section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
         <h1 className="mb-2 text-2xl font-semibold">Iniciar sesión</h1>
         <p className="mb-4 text-sm text-muted-foreground">

apps/frontend/src/features/not-found/not-found-page.tsx

@@ -4,7 +4,7 @@ import { Compass, Home, Sparkles } from 'lucide-react';
 
 export function NotFoundPage() {
   return (
-    <main className="relative isolate mx-auto flex min-h-screen w-full max-w-5xl items-center justify-center overflow-hidden px-6 py-10">
+    <main className="relative isolate mx-auto flex min-h-screen w-full max-w-5xl items-center justify-center overflow-hidden px-3 py-10 sm:px-6">
       <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_20%_20%,rgba(56,189,248,0.14),transparent_45%),radial-gradient(circle_at_80%_10%,rgba(244,114,182,0.12),transparent_40%),radial-gradient(circle_at_50%_90%,rgba(59,130,246,0.10),transparent_40%)]" />
 
       <section className="w-full max-w-2xl rounded-2xl border bg-card/80 p-8 text-card-foreground shadow-xl backdrop-blur">

apps/frontend/src/features/onboard/components/onboarding-layout.tsx

@@ -7,7 +7,7 @@ type OnboardingLayoutProps = PropsWithChildren<{
 
 export function OnboardingLayout({ title, description, children }: OnboardingLayoutProps) {
   return (
-    <main className="mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-6">
+    <main className="mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-3 sm:px-6">
       <section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
         <h1 className="mb-2 text-2xl font-semibold">{title}</h1>
         <p className="mb-4 text-sm text-muted-foreground">{description}</p>

apps/frontend/src/features/onboard/create-complex-page.tsx

@@ -106,7 +106,7 @@ export function CreateComplexPage() {
   };
 
   return (
-    <main className="flex min-h-screen w-full items-center justify-center px-6">
+    <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
       <section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
         <h1 className="mb-2 text-2xl font-semibold">Crear tu complejo</h1>
         <p className="mb-4 text-sm text-muted-foreground">

apps/frontend/src/features/onboard/onboard-login-page.tsx

@@ -142,7 +142,7 @@ export function OnboardLoginPage({
   };
 
   return (
-    <main className="flex min-h-screen w-full items-center justify-center px-6">
+    <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
       <section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
         <h1 className="mb-2 text-2xl font-semibold">
           {mode === 'login' ? 'Iniciar sesión' : 'Crear cuenta'}

apps/frontend/src/features/onboard/verify-email-page.tsx

@@ -24,7 +24,7 @@ export function VerifyEmailPage() {
   };
 
   return (
-    <main className="flex min-h-screen w-full items-center justify-center px-6">
+    <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
       <section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
         <h1 className="mb-2 text-2xl font-semibold">Verificá tu email</h1>
         <p className="mb-4 text-sm text-muted-foreground">

apps/frontend/src/features/password-reset/reset-password-page.tsx

@@ -149,7 +149,7 @@ export function ResetPasswordPage() {
 
   if (successMessage) {
     return (
-      <main className="flex min-h-screen w-full items-center justify-center px-6">
+      <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
         <section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
           <div className="text-center">
             <div className="mb-4 text-2xl">✓</div>
@@ -162,7 +162,7 @@ export function ResetPasswordPage() {
   }
 
   return (
-    <main className="flex min-h-screen w-full items-center justify-center px-6">
+    <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
       <section className="w-full max-w-sm rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
         <h1 className="mb-2 text-2xl font-semibold">
           {step === 'email' ? 'Restablecer contraseña' : 'Ingresá el código'}

apps/frontend/src/features/profile/profile-page.tsx

@@ -100,7 +100,7 @@ export function ProfilePage() {
 
   if (!isAuthenticated) {
     return (
-      <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6">
+      <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-3 sm:px-6">
         <section className="w-full max-w-3xl rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
           <h1 className="text-2xl font-semibold">Perfil</h1>
           <p className="mt-2 text-sm text-muted-foreground">
@@ -115,7 +115,7 @@ export function ProfilePage() {
   }
 
   return (
-    <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-6 py-8">
+    <main className="mx-auto flex min-h-[60vh] w-full max-w-6xl items-center justify-center px-3 py-8 sm:px-6">
       <div className="w-full max-w-3xl space-y-6">
         <section className="rounded-xl border bg-card p-6 text-card-foreground shadow-sm">
           <div className="flex items-center gap-3">

apps/frontend/src/features/public-booking/public-booking-confirmation-page.tsx

@@ -41,7 +41,7 @@ export function PublicBookingConfirmationPage({
 
   return (
     <main className="min-h-screen bg-linear-to-b from-background via-background to-primary/5">
-      <div className="mx-auto flex min-h-screen w-full max-w-3xl items-center px-4 py-8 sm:px-6">
+      <div className="mx-auto flex min-h-screen w-full max-w-3xl items-center px-3 py-8 sm:px-6">
         <section className="w-full rounded-3xl border bg-card p-5 shadow-lg sm:p-8">
           {confirmationQuery.isLoading && (
             <p className="text-sm text-muted-foreground">Cargando confirmacion...</p>

apps/frontend/src/features/public-booking/public-booking-page.tsx

@@ -330,7 +330,7 @@ export function PublicBookingPage({ complexSlug }: PublicBookingPageProps) {
 
   return (
     <main className="min-h-screen bg-linear-to-b from-background to-muted/40">
-      <div className="mx-auto flex w-full max-w-5xl flex-col gap-4 px-4 py-4 sm:gap-6 sm:px-6 sm:py-8">
+      <div className="mx-auto flex w-full max-w-5xl flex-col gap-4 px-3 py-4 sm:gap-6 sm:px-6 sm:py-8">
         <section className="rounded-2xl border bg-card p-4 shadow-sm sm:p-6">
           <div className="flex flex-col gap-1">
             <h1 className="text-2xl font-bold text-primary sm:text-3xl">

apps/frontend/src/features/select-complex/select-complex-page.tsx

@@ -29,7 +29,7 @@ export function SelectComplexPage() {
 
   if (complexesQuery.isLoading) {
     return (
-      <main className="flex min-h-screen w-full items-center justify-center px-6">
+      <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
         <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
       </main>
     );
@@ -37,7 +37,7 @@ export function SelectComplexPage() {
 
   if (complexesQuery.isError) {
     return (
-      <main className="flex min-h-screen w-full items-center justify-center px-6">
+      <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
         <div className="text-center">
           <p className="text-destructive">Error al cargar tus complejos.</p>
           <Button variant="link" className="mt-2" onClick={() => complexesQuery.refetch()}>
@@ -52,7 +52,7 @@ export function SelectComplexPage() {
 
   if (complexes.length === 0) {
     return (
-      <main className="flex min-h-screen w-full items-center justify-center px-6">
+      <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
         <div className="text-center">
           <p className="text-muted-foreground">No tenés complejos asociados.</p>
         </div>
@@ -61,7 +61,7 @@ export function SelectComplexPage() {
   }
 
   return (
-    <main className="flex min-h-screen w-full items-center justify-center px-6">
+    <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
       <section className="w-full max-w-md space-y-6">
         <div className="space-y-2">
           <h1 className="text-2xl font-semibold">Seleccioná un complejo</h1>

apps/frontend/src/features/server-error/server-error-page.tsx

@@ -4,7 +4,7 @@ import { AlertTriangle, Home, RefreshCw, Route } from 'lucide-react';
 
 export function ServerErrorPage({ error, reset }: ErrorComponentProps) {
   return (
-    <main className="relative isolate mx-auto flex min-h-screen w-full max-w-5xl items-center justify-center overflow-hidden px-6 py-10">
+    <main className="relative isolate mx-auto flex min-h-screen w-full max-w-5xl items-center justify-center overflow-hidden px-3 py-10 sm:px-6">
       <div className="pointer-events-none absolute inset-0 -z-10 bg-[radial-gradient(circle_at_15%_10%,rgba(248,113,113,0.14),transparent_42%),radial-gradient(circle_at_80%_20%,rgba(251,191,36,0.12),transparent_38%),radial-gradient(circle_at_60%_90%,rgba(59,130,246,0.10),transparent_42%)]" />
 
       <section className="w-full max-w-2xl rounded-2xl border bg-card/80 p-8 text-card-foreground shadow-xl backdrop-blur">

apps/frontend/src/main.tsx

@@ -36,7 +36,7 @@ function AppRouter() {
 
   if (auth.loading) {
     return (
-      <main className="mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-6">
+      <main className="mx-auto flex min-h-screen w-full max-w-6xl items-center justify-center px-3 sm:px-6">
         <p className="text-sm text-muted-foreground">Validando sesión...</p>
       </main>
     );

apps/frontend/src/routes/__root.tsx

@@ -19,7 +19,7 @@ export const Route = createRootRouteWithContext<RouterContext>()({
 function RootRoute() {
   return (
     <Layout>
-      <div className="flex flex-col p-6">
+      <div className="flex flex-col">
         <Outlet />
       </div>
     </Layout>

apps/frontend/src/routes/auth-callback.tsx

@@ -41,7 +41,7 @@ function AuthCallbackPage() {
   }, [isAuthenticated, navigate]);
 
   return (
-    <main className="flex min-h-screen w-full items-center justify-center px-6">
+    <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
       <p className="text-sm text-muted-foreground">Completando sesión...</p>
     </main>
   );

apps/frontend/src/routes/invite.tsx

@@ -36,7 +36,7 @@ function InvitePage() {
 
   if (isAuthenticated) {
     return (
-      <main className="flex min-h-screen w-full items-center justify-center px-6">
+      <main className="flex min-h-screen w-full items-center justify-center px-3 sm:px-6">
         <p className="text-sm text-muted-foreground">Aceptando invitación...</p>
       </main>
     );