From d0829e2bf255a4d590ce1902ae9570e725808d7d Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Fri, 2 Jan 2026 18:44:00 +0100
Subject: [PATCH] style(backups): use container queries to avoid overflow when
 menu is open

---
 app/client/components/layout.tsx              |  2 +-
 .../components/create-schedule-form.tsx       | 12 +++----
 .../components/schedule-mirrors-config.tsx    |  8 ++---
 .../schedule-notifications-config.tsx         | 14 ++++----
 .../backups/components/schedule-summary.tsx   | 32 +++++++++----------
 app/client/modules/backups/routes/backups.tsx |  2 +-
 6 files changed, 36 insertions(+), 34 deletions(-)

diff --git a/app/client/components/layout.tsx b/app/client/components/layout.tsx
index 8142c252..9ddbbef7 100644
--- a/app/client/components/layout.tsx
+++ b/app/client/components/layout.tsx
@@ -76,7 +76,7 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 				</header>
 				<div className="main-content flex-1 overflow-y-auto">
 					<GridBackground>
-						<main className="flex flex-col p-2 pb-6 pt-2 sm:p-8 sm:pt-6 mx-auto">
+						<main className="flex flex-col p-2 pb-6 pt-2 sm:p-8 sm:pt-6 mx-auto @container">
 							<Outlet />
 						</main>
 					</GridBackground>
diff --git a/app/client/modules/backups/components/create-schedule-form.tsx b/app/client/modules/backups/components/create-schedule-form.tsx
index 38437f7f..63d3a8e0 100644
--- a/app/client/modules/backups/components/create-schedule-form.tsx
+++ b/app/client/modules/backups/components/create-schedule-form.tsx
@@ -195,12 +195,12 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 								Schedule automated backups of <strong>{volume.name}</strong> to a secure repository.
 							</CardDescription>
 						</CardHeader>
-						<CardContent className="grid gap-6 md:grid-cols-2">
+						<CardContent className="grid gap-6 @md:grid-cols-2">
 							<FormField
 								control={form.control}
 								name="name"
 								render={({ field }) => (
-									<FormItem className="md:col-span-2">
+									<FormItem className="@md:col-span-2">
 										<FormLabel>Backup name</FormLabel>
 										<FormControl>
 											<Input placeholder="My backup" {...field} />
@@ -215,7 +215,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 								control={form.control}
 								name="repositoryId"
 								render={({ field }) => (
-									<FormItem className="md:col-span-2">
+									<FormItem className="@md:col-span-2">
 										<FormLabel>Backup repository</FormLabel>
 										<FormControl>
 											<Select {...field} onValueChange={field.onChange}>
@@ -300,7 +300,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 									control={form.control}
 									name="weeklyDay"
 									render={({ field }) => (
-										<FormItem className="md:col-span-2">
+										<FormItem className="@md:col-span-2">
 											<FormLabel>Execution day</FormLabel>
 											<FormControl>
 												<Select {...field} onValueChange={field.onChange}>
@@ -327,7 +327,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 									control={form.control}
 									name="monthlyDays"
 									render={({ field }) => (
-										<FormItem className="md:col-span-2">
+										<FormItem className="@md:col-span-2">
 											<FormLabel>Days of the month</FormLabel>
 											<FormControl>
 												<div className="grid grid-cols-7 gap-4 w-max">
@@ -512,7 +512,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 							<CardTitle>Retention policy</CardTitle>
 							<CardDescription>Define how many snapshots to keep. Leave empty to keep all.</CardDescription>
 						</CardHeader>
-						<CardContent className="grid gap-4 md:grid-cols-2">
+						<CardContent className="grid gap-4 @md:grid-cols-2">
 							<FormField
 								control={form.control}
 								name="keepLast"
diff --git a/app/client/modules/backups/components/schedule-mirrors-config.tsx b/app/client/modules/backups/components/schedule-mirrors-config.tsx
index db9eab63..725d3969 100644
--- a/app/client/modules/backups/components/schedule-mirrors-config.tsx
+++ b/app/client/modules/backups/components/schedule-mirrors-config.tsx
@@ -196,7 +196,7 @@ export const ScheduleMirrorsConfig = ({ scheduleId, primaryRepositoryId, reposit
 							<Copy className="h-5 w-5" />
 							Mirror Repositories
 						</CardTitle>
-						<CardDescription>
+						<CardDescription className="hidden @md:block mt-1">
 							Configure secondary repositories where snapshots will be automatically copied after each backup
 						</CardDescription>
 					</div>
@@ -270,9 +270,9 @@ export const ScheduleMirrorsConfig = ({ scheduleId, primaryRepositoryId, reposit
 							<TableHeader>
 								<TableRow>
 									<TableHead>Repository</TableHead>
-									<TableHead className="text-center w-[100px]">Enabled</TableHead>
-									<TableHead className="w-[180px]">Last Copy</TableHead>
-									<TableHead className="w-[50px]"></TableHead>
+									<TableHead className="text-center w-25">Enabled</TableHead>
+									<TableHead className="w-45">Last Copy</TableHead>
+									<TableHead className="w-12.5"></TableHead>
 								</TableRow>
 							</TableHeader>
 							<TableBody>
diff --git a/app/client/modules/backups/components/schedule-notifications-config.tsx b/app/client/modules/backups/components/schedule-notifications-config.tsx
index 820e72b7..0a1d4f37 100644
--- a/app/client/modules/backups/components/schedule-notifications-config.tsx
+++ b/app/client/modules/backups/components/schedule-notifications-config.tsx
@@ -152,7 +152,9 @@ export const ScheduleNotificationsConfig = ({ scheduleId, destinations }: Props)
 							<Bell className="h-5 w-5" />
 							Notifications
 						</CardTitle>
-						<CardDescription>Configure which notifications to send for this backup schedule</CardDescription>
+						<CardDescription className="hidden @md:block mt-1">
+							Configure which notifications to send for this backup schedule
+						</CardDescription>
 					</div>
 					{!isAddingNew && availableDestinations.length > 0 && (
 						<Button variant="outline" size="sm" onClick={() => setIsAddingNew(true)}>
@@ -198,11 +200,11 @@ export const ScheduleNotificationsConfig = ({ scheduleId, destinations }: Props)
 							<TableHeader>
 								<TableRow>
 									<TableHead>Destination</TableHead>
-									<TableHead className="text-center w-[100px]">Start</TableHead>
-									<TableHead className="text-center w-[100px]">Success</TableHead>
-									<TableHead className="text-center w-[100px]">Warnings</TableHead>
-									<TableHead className="text-center w-[100px]">Failures</TableHead>
-									<TableHead className="w-[50px]"></TableHead>
+									<TableHead className="text-center w-25">Start</TableHead>
+									<TableHead className="text-center w-25">Success</TableHead>
+									<TableHead className="text-center w-25">Warnings</TableHead>
+									<TableHead className="text-center w-25">Failures</TableHead>
+									<TableHead className="w-12.5"></TableHead>
 								</TableRow>
 							</TableHeader>
 							<TableBody>
diff --git a/app/client/modules/backups/components/schedule-summary.tsx b/app/client/modules/backups/components/schedule-summary.tsx
index 5022f416..a6f0d16e 100644
--- a/app/client/modules/backups/components/schedule-summary.tsx
+++ b/app/client/modules/backups/components/schedule-summary.tsx
@@ -81,7 +81,7 @@ export const ScheduleSummary = (props: Props) => {
 		<div className="space-y-4">
 			<Card>
 				<CardHeader className="space-y-4">
-					<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+					<div className="flex flex-col @sm:flex-row @sm:items-center @sm:justify-between gap-4">
 						<div>
 							<CardTitle>{schedule.name}</CardTitle>
 							<CardDescription className="mt-1">
@@ -96,7 +96,7 @@ export const ScheduleSummary = (props: Props) => {
 								</Link>
 							</CardDescription>
 						</div>
-						<div className="flex items-center gap-2 justify-between sm:justify-start">
+						<div className="flex items-center gap-2 justify-between @sm:justify-start">
 							<OnOff
 								isOn={schedule.enabled}
 								toggle={handleToggleEnabled}
@@ -105,16 +105,16 @@ export const ScheduleSummary = (props: Props) => {
 							/>
 						</div>
 					</div>
-					<div className="flex flex-col sm:flex-row gap-2">
+					<div className="flex flex-col @md:flex-row gap-2">
 						{schedule.lastBackupStatus === "in_progress" ? (
-							<Button variant="destructive" size="sm" onClick={handleStopBackup} className="w-full sm:w-auto">
+							<Button variant="destructive" size="sm" onClick={handleStopBackup} className="w-full @md:w-auto">
 								<Square className="h-4 w-4 mr-2" />
-								<span className="sm:inline">Stop backup</span>
+								<span>Stop backup</span>
 							</Button>
 						) : (
-							<Button variant="default" size="sm" onClick={handleRunBackupNow} className="w-full sm:w-auto">
+							<Button variant="default" size="sm" onClick={handleRunBackupNow} className="w-full @md:w-auto">
 								<Play className="h-4 w-4 mr-2" />
-								<span className="sm:inline">Backup now</span>
+								<span>Backup now</span>
 							</Button>
 						)}
 						{schedule.retentionPolicy && (
@@ -123,28 +123,28 @@ export const ScheduleSummary = (props: Props) => {
 								size="sm"
 								loading={runForget.isPending}
 								onClick={() => setShowForgetConfirm(true)}
-								className="w-full sm:w-auto"
+								className="w-full @md:w-auto"
 							>
 								<Eraser className="h-4 w-4 mr-2" />
-								<span className="sm:inline">Run cleanup</span>
+								<span>Run cleanup</span>
 							</Button>
 						)}
-						<Button variant="outline" size="sm" onClick={() => setIsEditMode(true)} className="w-full sm:w-auto">
+						<Button variant="outline" size="sm" onClick={() => setIsEditMode(true)} className="w-full @md:w-auto">
 							<Pencil className="h-4 w-4 mr-2" />
-							<span className="sm:inline">Edit schedule</span>
+							<span>Edit schedule</span>
 						</Button>
 						<Button
 							variant="outline"
 							size="sm"
 							onClick={() => setShowDeleteConfirm(true)}
-							className="text-destructive hover:text-destructive w-full sm:w-auto"
+							className="text-destructive hover:text-destructive w-full @md:w-auto"
 						>
 							<Trash2 className="h-4 w-4 mr-2" />
-							<span className="sm:inline">Delete</span>
+							<span>Delete</span>
 						</Button>
 					</div>
 				</CardHeader>
-				<CardContent className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+				<CardContent className="grid gap-4 @md:grid-cols-2 @lg:grid-cols-4">
 					<div>
 						<p className="text-xs uppercase text-muted-foreground">Schedule</p>
 						<p className="font-medium">{summary.scheduleLabel}</p>
@@ -178,7 +178,7 @@ export const ScheduleSummary = (props: Props) => {
 					</div>
 
 					{schedule.lastBackupStatus === "warning" && (
-						<div className="md:col-span-2 lg:col-span-4">
+						<div className="@md:col-span-2 @lg:col-span-4">
 							<p className="text-xs uppercase text-muted-foreground">Warning Details</p>
 							<p className="font-mono text-sm text-yellow-600 whitespace-pre-wrap break-all">
 								{schedule.lastBackupError ??
@@ -188,7 +188,7 @@ export const ScheduleSummary = (props: Props) => {
 					)}
 
 					{schedule.lastBackupError && (
-						<div className="md:col-span-2 lg:col-span-4">
+						<div className="@md:col-span-2 @lg:col-span-4">
 							<p className="text-xs uppercase text-muted-foreground">Error Details</p>
 							<p className="font-mono text-sm text-red-600 whitespace-pre-wrap break-all">{schedule.lastBackupError}</p>
 						</div>
diff --git a/app/client/modules/backups/routes/backups.tsx b/app/client/modules/backups/routes/backups.tsx
index 76f0c714..49b5ca54 100644
--- a/app/client/modules/backups/routes/backups.tsx
+++ b/app/client/modules/backups/routes/backups.tsx
@@ -117,7 +117,7 @@ export default function Backups({ loaderData }: Route.ComponentProps) {
 		<div className="container mx-auto space-y-6">
 			<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
 				<SortableContext items={items} strategy={rectSortingStrategy}>
-					<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3 auto-rows-fr">
+					<div className="grid gap-4 @md:grid-cols-1 @lg:grid-cols-2 @2xl:grid-cols-3 auto-rows-fr">
 						{items.map((id) => {
 							const schedule = scheduleMap.get(id);
 							if (!schedule) return null;