From 85e2272a5ccd8ea282819ca24fcc7a723d36fa2f Mon Sep 17 00:00:00 2001
From: Nicolas Meienberger <github@thisprops.com>
Date: Tue, 17 Feb 2026 19:22:15 +0100
Subject: [PATCH] fix(ui): missing @container class in backup details

---
 .../basic-info-section.tsx                    |  4 ++--
 .../frequency-section.tsx                     |  4 ++--
 .../components/create-schedule-form/index.tsx |  8 +++----
 .../backups/components/schedule-summary.tsx   | 24 +++++++++----------
 4 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/app/client/modules/backups/components/create-schedule-form/basic-info-section.tsx b/app/client/modules/backups/components/create-schedule-form/basic-info-section.tsx
index b3b69943..4c1b8f96 100644
--- a/app/client/modules/backups/components/create-schedule-form/basic-info-section.tsx
+++ b/app/client/modules/backups/components/create-schedule-form/basic-info-section.tsx
@@ -24,7 +24,7 @@ export const BasicInfoSection = ({ form, volume }: BasicInfoSectionProps) => {
 				control={form.control}
 				name="name"
 				render={({ field }) => (
-					<FormItem className="@md:col-span-2">
+					<FormItem className="@medium:col-span-2">
 						<FormLabel>Backup name</FormLabel>
 						<FormControl>
 							<Input placeholder="My backup" {...field} />
@@ -39,7 +39,7 @@ export const BasicInfoSection = ({ form, volume }: BasicInfoSectionProps) => {
 				control={form.control}
 				name="repositoryId"
 				render={({ field }) => (
-					<FormItem className="@md:col-span-2">
+					<FormItem className="@medium:col-span-2">
 						<FormLabel>Backup repository</FormLabel>
 						<FormControl>
 							<Select {...field} onValueChange={field.onChange}>
diff --git a/app/client/modules/backups/components/create-schedule-form/frequency-section.tsx b/app/client/modules/backups/components/create-schedule-form/frequency-section.tsx
index 91c111ae..4d1441fa 100644
--- a/app/client/modules/backups/components/create-schedule-form/frequency-section.tsx
+++ b/app/client/modules/backups/components/create-schedule-form/frequency-section.tsx
@@ -73,7 +73,7 @@ export const FrequencySection = ({ form, frequency }: FrequencySectionProps) =>
 					control={form.control}
 					name="weeklyDay"
 					render={({ field }) => (
-						<FormItem className="@md:col-span-2">
+						<FormItem className="@medium:col-span-2">
 							<FormLabel>Execution day</FormLabel>
 							<FormControl>
 								<Select {...field} onValueChange={field.onChange}>
@@ -101,7 +101,7 @@ export const FrequencySection = ({ form, frequency }: FrequencySectionProps) =>
 					control={form.control}
 					name="monthlyDays"
 					render={({ field }) => (
-						<FormItem className="@md:col-span-2">
+						<FormItem className="@medium:col-span-2">
 							<FormLabel>Days of the month</FormLabel>
 							<FormControl>
 								<div className="grid grid-cols-7 gap-4 w-max">
diff --git a/app/client/modules/backups/components/create-schedule-form/index.tsx b/app/client/modules/backups/components/create-schedule-form/index.tsx
index cf6e47d4..21007ca7 100644
--- a/app/client/modules/backups/components/create-schedule-form/index.tsx
+++ b/app/client/modules/backups/components/create-schedule-form/index.tsx
@@ -105,14 +105,14 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 				id={formId}
 			>
 				<div className="grid gap-4 min-w-0">
-					<Card className="min-w-0">
+					<Card className="min-w-0 @container">
 						<CardHeader>
 							<CardTitle>Backup automation</CardTitle>
 							<CardDescription className="mt-1">
 								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 @medium:grid-cols-2">
 							<BasicInfoSection form={form} volume={volume} />
 							<FrequencySection form={form} frequency={frequency} />
 						</CardContent>
@@ -152,12 +152,12 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 						</CardContent>
 					</Card>
 
-					<Card className="min-w-0">
+					<Card className="min-w-0 @container">
 						<CardHeader>
 							<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 @medium:grid-cols-2">
 							<RetentionSection form={form} />
 						</CardContent>
 					</Card>
diff --git a/app/client/modules/backups/components/schedule-summary.tsx b/app/client/modules/backups/components/schedule-summary.tsx
index 7581b8cc..aa7ad966 100644
--- a/app/client/modules/backups/components/schedule-summary.tsx
+++ b/app/client/modules/backups/components/schedule-summary.tsx
@@ -87,9 +87,9 @@ export const ScheduleSummary = (props: Props) => {
 
 	return (
 		<div className="space-y-4">
-			<Card>
+			<Card className="@container">
 				<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 @medium:flex-row @medium:items-center @medium:justify-between gap-4">
 						<div>
 							<CardTitle>{schedule.name}</CardTitle>
 							<CardDescription className="mt-1">
@@ -112,7 +112,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 @medium:justify-start">
 							<OnOff
 								isOn={schedule.enabled}
 								toggle={handleToggleEnabled}
@@ -121,19 +121,19 @@ export const ScheduleSummary = (props: Props) => {
 							/>
 						</div>
 					</div>
-					<div className="flex flex-col @lg:flex-row gap-2">
+					<div className="flex flex-col @wide:flex-row gap-2">
 						{schedule.lastBackupStatus === "in_progress" ? (
 							<Button
 								variant="destructive"
 								size="sm"
 								onClick={() => setShowStopConfirm(true)}
-								className="w-full @md:w-auto"
+								className="w-full @medium:w-auto"
 							>
 								<Square className="h-4 w-4 mr-2" />
 								<span>Stop backup</span>
 							</Button>
 						) : (
-							<Button variant="default" size="sm" onClick={handleRunBackupNow} className="w-full @md:w-auto">
+							<Button variant="default" size="sm" onClick={handleRunBackupNow} className="w-full @medium:w-auto">
 								<Play className="h-4 w-4 mr-2" />
 								<span>Backup now</span>
 							</Button>
@@ -144,13 +144,13 @@ export const ScheduleSummary = (props: Props) => {
 								size="sm"
 								loading={runForget.isPending}
 								onClick={() => setShowForgetConfirm(true)}
-								className="w-full @md:w-auto"
+								className="w-full @medium:w-auto"
 							>
 								<Eraser className="h-4 w-4 mr-2" />
 								<span>Run cleanup</span>
 							</Button>
 						)}
-						<Button variant="outline" size="sm" onClick={() => setIsEditMode(true)} className="w-full @md:w-auto">
+						<Button variant="outline" size="sm" onClick={() => setIsEditMode(true)} className="w-full @medium:w-auto">
 							<Pencil className="h-4 w-4 mr-2" />
 							<span>Edit schedule</span>
 						</Button>
@@ -158,14 +158,14 @@ export const ScheduleSummary = (props: Props) => {
 							variant="outline"
 							size="sm"
 							onClick={() => setShowDeleteConfirm(true)}
-							className="text-destructive hover:text-destructive w-full @md:w-auto"
+							className="text-destructive hover:text-destructive w-full @medium:w-auto"
 						>
 							<Trash2 className="h-4 w-4 mr-2" />
 							<span>Delete</span>
 						</Button>
 					</div>
 				</CardHeader>
-				<CardContent className="grid gap-4 grid-cols-1 @md:grid-cols-2 @lg:grid-cols-4">
+				<CardContent className="grid gap-4 grid-cols-1 @medium:grid-cols-2 @wide:grid-cols-4">
 					<div>
 						<p className="text-xs uppercase text-muted-foreground">Schedule</p>
 						<p className="font-medium">{summary.scheduleLabel}</p>
@@ -195,7 +195,7 @@ export const ScheduleSummary = (props: Props) => {
 					</div>
 
 					{schedule.lastBackupStatus === "warning" && (
-						<div className="@md:col-span-2 @lg:col-span-4">
+						<div className="@medium:col-span-2 @wide: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 wrap-break-word">
 								{schedule.lastBackupError ??
@@ -205,7 +205,7 @@ export const ScheduleSummary = (props: Props) => {
 					)}
 
 					{schedule.lastBackupError && schedule.lastBackupStatus === "error" && (
-						<div className="@md:col-span-2 @lg:col-span-4">
+						<div className="@medium:col-span-2 @wide: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 wrap-break-word">
 								{schedule.lastBackupError}