danvics/zerobyte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

fix(ui): missing @container class in backup details

Browse source
This commit is contained in:
Nicolas Meienberger 2026-02-17 19:22:15 +01:00
parent c04219cbf7
commit 85e2272a5c
4 changed files with 20 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/client/modules/backups/components/create-schedule-form/basic-info-section.tsx
View file

@ -24,7 +24,7 @@ export const BasicInfoSection = ({ form, volume }: BasicInfoSectionProps) => {
control={form.control} control={form.control}
name="name" name="name"
render={({ field }) => ( render={({ field }) => (
<FormItem className="@md:col-span-2"> <FormItem className="@medium:col-span-2">
<FormLabel>Backup name</FormLabel> <FormLabel>Backup name</FormLabel>
<FormControl> <FormControl>
<Input placeholder="My backup" {...field} /> <Input placeholder="My backup" {...field} />
@ -39,7 +39,7 @@ export const BasicInfoSection = ({ form, volume }: BasicInfoSectionProps) => {
control={form.control} control={form.control}
name="repositoryId" name="repositoryId"
render={({ field }) => ( render={({ field }) => (
<FormItem className="@md:col-span-2"> <FormItem className="@medium:col-span-2">
<FormLabel>Backup repository</FormLabel> <FormLabel>Backup repository</FormLabel>
<FormControl> <FormControl>
<Select {...field} onValueChange={field.onChange}> <Select {...field} onValueChange={field.onChange}>

4
app/client/modules/backups/components/create-schedule-form/frequency-section.tsx
View file

@ -73,7 +73,7 @@ export const FrequencySection = ({ form, frequency }: FrequencySectionProps) =>
control={form.control} control={form.control}
name="weeklyDay" name="weeklyDay"
render={({ field }) => ( render={({ field }) => (
<FormItem className="@md:col-span-2"> <FormItem className="@medium:col-span-2">
<FormLabel>Execution day</FormLabel> <FormLabel>Execution day</FormLabel>
<FormControl> <FormControl>
<Select {...field} onValueChange={field.onChange}> <Select {...field} onValueChange={field.onChange}>
@ -101,7 +101,7 @@ export const FrequencySection = ({ form, frequency }: FrequencySectionProps) =>
control={form.control} control={form.control}
name="monthlyDays" name="monthlyDays"
render={({ field }) => ( render={({ field }) => (
<FormItem className="@md:col-span-2"> <FormItem className="@medium:col-span-2">
<FormLabel>Days of the month</FormLabel> <FormLabel>Days of the month</FormLabel>
<FormControl> <FormControl>
<div className="grid grid-cols-7 gap-4 w-max"> <div className="grid grid-cols-7 gap-4 w-max">

8
app/client/modules/backups/components/create-schedule-form/index.tsx
View file

@ -105,14 +105,14 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
id={formId} id={formId}
> >
<div className="grid gap-4 min-w-0"> <div className="grid gap-4 min-w-0">
<Card className="min-w-0"> <Card className="min-w-0 @container">
<CardHeader> <CardHeader>
<CardTitle>Backup automation</CardTitle> <CardTitle>Backup automation</CardTitle>
<CardDescription className="mt-1"> <CardDescription className="mt-1">
Schedule automated backups of <strong>{volume.name}</strong> to a secure repository. Schedule automated backups of <strong>{volume.name}</strong> to a secure repository.
</CardDescription> </CardDescription>
</CardHeader> </CardHeader>
<CardContent className="grid gap-6 @md:grid-cols-2"> <CardContent className="grid gap-6 @medium:grid-cols-2">
<BasicInfoSection form={form} volume={volume} /> <BasicInfoSection form={form} volume={volume} />
<FrequencySection form={form} frequency={frequency} /> <FrequencySection form={form} frequency={frequency} />
</CardContent> </CardContent>
@ -152,12 +152,12 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
</CardContent> </CardContent>
</Card> </Card>
<Card className="min-w-0"> <Card className="min-w-0 @container">
<CardHeader> <CardHeader>
<CardTitle>Retention policy</CardTitle> <CardTitle>Retention policy</CardTitle>
<CardDescription>Define how many snapshots to keep. Leave empty to keep all.</CardDescription> <CardDescription>Define how many snapshots to keep. Leave empty to keep all.</CardDescription>
</CardHeader> </CardHeader>
<CardContent className="grid gap-4 @md:grid-cols-2"> <CardContent className="grid gap-4 @medium:grid-cols-2">
<RetentionSection form={form} /> <RetentionSection form={form} />
</CardContent> </CardContent>
</Card> </Card>

24
app/client/modules/backups/components/schedule-summary.tsx
View file

@ -87,9 +87,9 @@ export const ScheduleSummary = (props: Props) => {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<Card> <Card className="@container">
<CardHeader className="space-y-4"> <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> <div>
<CardTitle>{schedule.name}</CardTitle> <CardTitle>{schedule.name}</CardTitle>
<CardDescription className="mt-1"> <CardDescription className="mt-1">
@ -112,7 +112,7 @@ export const ScheduleSummary = (props: Props) => {
</Link> </Link>
</CardDescription> </CardDescription>
</div> </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 <OnOff
isOn={schedule.enabled} isOn={schedule.enabled}
toggle={handleToggleEnabled} toggle={handleToggleEnabled}
@ -121,19 +121,19 @@ export const ScheduleSummary = (props: Props) => {
/> />
</div> </div>
</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" ? ( {schedule.lastBackupStatus === "in_progress" ? (
<Button <Button
variant="destructive" variant="destructive"
size="sm" size="sm"
onClick={() => setShowStopConfirm(true)} onClick={() => setShowStopConfirm(true)}
className="w-full @md:w-auto" className="w-full @medium:w-auto"
> >
<Square className="h-4 w-4 mr-2" /> <Square className="h-4 w-4 mr-2" />
<span>Stop backup</span> <span>Stop backup</span>
</Button> </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" /> <Play className="h-4 w-4 mr-2" />
<span>Backup now</span> <span>Backup now</span>
</Button> </Button>
@ -144,13 +144,13 @@ export const ScheduleSummary = (props: Props) => {
size="sm" size="sm"
loading={runForget.isPending} loading={runForget.isPending}
onClick={() => setShowForgetConfirm(true)} onClick={() => setShowForgetConfirm(true)}
className="w-full @md:w-auto" className="w-full @medium:w-auto"
> >
<Eraser className="h-4 w-4 mr-2" /> <Eraser className="h-4 w-4 mr-2" />
<span>Run cleanup</span> <span>Run cleanup</span>
</Button> </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" /> <Pencil className="h-4 w-4 mr-2" />
<span>Edit schedule</span> <span>Edit schedule</span>
</Button> </Button>
@ -158,14 +158,14 @@ export const ScheduleSummary = (props: Props) => {
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => setShowDeleteConfirm(true)} 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" /> <Trash2 className="h-4 w-4 mr-2" />
<span>Delete</span> <span>Delete</span>
</Button> </Button>
</div> </div>
</CardHeader> </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> <div>
<p className="text-xs uppercase text-muted-foreground">Schedule</p> <p className="text-xs uppercase text-muted-foreground">Schedule</p>
<p className="font-medium">{summary.scheduleLabel}</p> <p className="font-medium">{summary.scheduleLabel}</p>
@ -195,7 +195,7 @@ export const ScheduleSummary = (props: Props) => {
</div> </div>
{schedule.lastBackupStatus === "warning" && ( {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="text-xs uppercase text-muted-foreground">Warning Details</p>
<p className="font-mono text-sm text-yellow-600 whitespace-pre-wrap wrap-break-word"> <p className="font-mono text-sm text-yellow-600 whitespace-pre-wrap wrap-break-word">
{schedule.lastBackupError ?? {schedule.lastBackupError ??
@ -205,7 +205,7 @@ export const ScheduleSummary = (props: Props) => {
)} )}
{schedule.lastBackupError && schedule.lastBackupStatus === "error" && ( {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="text-xs uppercase text-muted-foreground">Error details</p>
<p className="font-mono text-sm text-red-600 whitespace-pre-wrap wrap-break-word"> <p className="font-mono text-sm text-red-600 whitespace-pre-wrap wrap-break-word">
{schedule.lastBackupError} {schedule.lastBackupError}