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

style(backups): use container queries to avoid overflow when menu is open

Browse source
This commit is contained in:
Nicolas Meienberger 2026-01-02 18:44:00 +01:00
parent b8fe2a985b
commit d0829e2bf2
6 changed files with 36 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/client/components/layout.tsx
View file

@ -76,7 +76,7 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
</header> </header>
<div className="main-content flex-1 overflow-y-auto"> <div className="main-content flex-1 overflow-y-auto">
<GridBackground> <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 /> <Outlet />
</main> </main>
</GridBackground> </GridBackground>

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

@ -195,12 +195,12 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
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 @md:grid-cols-2">
<FormField <FormField
control={form.control} control={form.control}
name="name" name="name"
render={({ field }) => ( render={({ field }) => (
<FormItem className="md:col-span-2"> <FormItem className="@md:col-span-2">
<FormLabel>Backup name</FormLabel> <FormLabel>Backup name</FormLabel>
<FormControl> <FormControl>
<Input placeholder="My backup" {...field} /> <Input placeholder="My backup" {...field} />
@ -215,7 +215,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
control={form.control} control={form.control}
name="repositoryId" name="repositoryId"
render={({ field }) => ( render={({ field }) => (
<FormItem className="md:col-span-2"> <FormItem className="@md:col-span-2">
<FormLabel>Backup repository</FormLabel> <FormLabel>Backup repository</FormLabel>
<FormControl> <FormControl>
<Select {...field} onValueChange={field.onChange}> <Select {...field} onValueChange={field.onChange}>
@ -300,7 +300,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
control={form.control} control={form.control}
name="weeklyDay" name="weeklyDay"
render={({ field }) => ( render={({ field }) => (
<FormItem className="md:col-span-2"> <FormItem className="@md:col-span-2">
<FormLabel>Execution day</FormLabel> <FormLabel>Execution day</FormLabel>
<FormControl> <FormControl>
<Select {...field} onValueChange={field.onChange}> <Select {...field} onValueChange={field.onChange}>
@ -327,7 +327,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
control={form.control} control={form.control}
name="monthlyDays" name="monthlyDays"
render={({ field }) => ( render={({ field }) => (
<FormItem className="md:col-span-2"> <FormItem className="@md: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">
@ -512,7 +512,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
<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 @md:grid-cols-2">
<FormField <FormField
control={form.control} control={form.control}
name="keepLast" name="keepLast"

8
app/client/modules/backups/components/schedule-mirrors-config.tsx
View file

@ -196,7 +196,7 @@ export const ScheduleMirrorsConfig = ({ scheduleId, primaryRepositoryId, reposit
<Copy className="h-5 w-5" /> <Copy className="h-5 w-5" />
Mirror Repositories Mirror Repositories
</CardTitle> </CardTitle>
<CardDescription> <CardDescription className="hidden @md:block mt-1">
Configure secondary repositories where snapshots will be automatically copied after each backup Configure secondary repositories where snapshots will be automatically copied after each backup
</CardDescription> </CardDescription>
</div> </div>
@ -270,9 +270,9 @@ export const ScheduleMirrorsConfig = ({ scheduleId, primaryRepositoryId, reposit
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>Repository</TableHead> <TableHead>Repository</TableHead>
<TableHead className="text-center w-[100px]">Enabled</TableHead> <TableHead className="text-center w-25">Enabled</TableHead>
<TableHead className="w-[180px]">Last Copy</TableHead> <TableHead className="w-45">Last Copy</TableHead>
<TableHead className="w-[50px]"></TableHead> <TableHead className="w-12.5"></TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>

14
app/client/modules/backups/components/schedule-notifications-config.tsx
View file

@ -152,7 +152,9 @@ export const ScheduleNotificationsConfig = ({ scheduleId, destinations }: Props)
<Bell className="h-5 w-5" /> <Bell className="h-5 w-5" />
Notifications Notifications
</CardTitle> </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> </div>
{!isAddingNew && availableDestinations.length > 0 && ( {!isAddingNew && availableDestinations.length > 0 && (
<Button variant="outline" size="sm" onClick={() => setIsAddingNew(true)}> <Button variant="outline" size="sm" onClick={() => setIsAddingNew(true)}>
@ -198,11 +200,11 @@ export const ScheduleNotificationsConfig = ({ scheduleId, destinations }: Props)
<TableHeader> <TableHeader>
<TableRow> <TableRow>
<TableHead>Destination</TableHead> <TableHead>Destination</TableHead>
<TableHead className="text-center w-[100px]">Start</TableHead> <TableHead className="text-center w-25">Start</TableHead>
<TableHead className="text-center w-[100px]">Success</TableHead> <TableHead className="text-center w-25">Success</TableHead>
<TableHead className="text-center w-[100px]">Warnings</TableHead> <TableHead className="text-center w-25">Warnings</TableHead>
<TableHead className="text-center w-[100px]">Failures</TableHead> <TableHead className="text-center w-25">Failures</TableHead>
<TableHead className="w-[50px]"></TableHead> <TableHead className="w-12.5"></TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>

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

@ -81,7 +81,7 @@ export const ScheduleSummary = (props: Props) => {
<div className="space-y-4"> <div className="space-y-4">
<Card> <Card>
<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 @sm:flex-row @sm:items-center @sm:justify-between gap-4">
<div> <div>
<CardTitle>{schedule.name}</CardTitle> <CardTitle>{schedule.name}</CardTitle>
<CardDescription className="mt-1"> <CardDescription className="mt-1">
@ -96,7 +96,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 @sm:justify-start">
<OnOff <OnOff
isOn={schedule.enabled} isOn={schedule.enabled}
toggle={handleToggleEnabled} toggle={handleToggleEnabled}
@ -105,16 +105,16 @@ export const ScheduleSummary = (props: Props) => {
/> />
</div> </div>
</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" ? ( {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" /> <Square className="h-4 w-4 mr-2" />
<span className="sm:inline">Stop backup</span> <span>Stop backup</span>
</Button> </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" /> <Play className="h-4 w-4 mr-2" />
<span className="sm:inline">Backup now</span> <span>Backup now</span>
</Button> </Button>
)} )}
{schedule.retentionPolicy && ( {schedule.retentionPolicy && (
@ -123,28 +123,28 @@ export const ScheduleSummary = (props: Props) => {
size="sm" size="sm"
loading={runForget.isPending} loading={runForget.isPending}
onClick={() => setShowForgetConfirm(true)} onClick={() => setShowForgetConfirm(true)}
className="w-full sm:w-auto" className="w-full @md:w-auto"
> >
<Eraser className="h-4 w-4 mr-2" /> <Eraser className="h-4 w-4 mr-2" />
<span className="sm:inline">Run cleanup</span> <span>Run cleanup</span>
</Button> </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" /> <Pencil className="h-4 w-4 mr-2" />
<span className="sm:inline">Edit schedule</span> <span>Edit schedule</span>
</Button> </Button>
<Button <Button
variant="outline" variant="outline"
size="sm" size="sm"
onClick={() => setShowDeleteConfirm(true)} 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" /> <Trash2 className="h-4 w-4 mr-2" />
<span className="sm:inline">Delete</span> <span>Delete</span>
</Button> </Button>
</div> </div>
</CardHeader> </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> <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>
@ -178,7 +178,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="@md:col-span-2 @lg: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 break-all"> <p className="font-mono text-sm text-yellow-600 whitespace-pre-wrap break-all">
{schedule.lastBackupError ?? {schedule.lastBackupError ??
@ -188,7 +188,7 @@ export const ScheduleSummary = (props: Props) => {
)} )}
{schedule.lastBackupError && ( {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="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> <p className="font-mono text-sm text-red-600 whitespace-pre-wrap break-all">{schedule.lastBackupError}</p>
</div> </div>

2
app/client/modules/backups/routes/backups.tsx
View file

@ -117,7 +117,7 @@ export default function Backups({ loaderData }: Route.ComponentProps) {
<div className="container mx-auto space-y-6"> <div className="container mx-auto space-y-6">
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}> <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<SortableContext items={items} strategy={rectSortingStrategy}> <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) => { {items.map((id) => {
const schedule = scheduleMap.get(id); const schedule = scheduleMap.get(id);
if (!schedule) return null; if (!schedule) return null;