Improved mobile layout
This commit is contained in:
@@ -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'}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user