style(backups): use container queries to avoid overflow when menu is open
This commit is contained in:
Nicolas Meienberger
parent
b8fe2a985b
commit
d0829e2bf2
6 changed files with 36 additions and 34 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in a new issue