Improved mobile layout

This commit is contained in:
Jose Selesan
2026-05-08 11:02:03 -03:00
parent 65295236c5
commit ab22ec86ec
25 changed files with 36 additions and 36 deletions

View File

@@ -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'}

View File

@@ -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;

View File

@@ -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>

View File

@@ -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

View File

@@ -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>