style: fix snapshots table

This commit is contained in:
Nicolas Meienberger
2025-11-05 22:00:39 +01:00
parent 941be2f306
commit 1e68339dd9
2 changed files with 41 additions and 39 deletions

View File

@@ -29,7 +29,7 @@ export const SnapshotsTable = ({ snapshots, repositoryName }: Props) => {
<TableHead className="uppercase">Date & Time</TableHead> <TableHead className="uppercase">Date & Time</TableHead>
<TableHead className="uppercase">Size</TableHead> <TableHead className="uppercase">Size</TableHead>
<TableHead className="uppercase hidden md:table-cell text-right">Duration</TableHead> <TableHead className="uppercase hidden md:table-cell text-right">Duration</TableHead>
<TableHead className="uppercase hidden text-right lg:table-cell">Volume</TableHead> <TableHead className="uppercase hidden text-right lg:table-cell">Paths</TableHead>
</TableRow> </TableRow>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -70,29 +70,22 @@ export const SnapshotsTable = ({ snapshots, repositoryName }: Props) => {
<TableCell className="hidden lg:table-cell"> <TableCell className="hidden lg:table-cell">
<div className="flex items-center justify-end gap-2"> <div className="flex items-center justify-end gap-2">
<FolderTree className="h-4 w-4 text-muted-foreground" /> <FolderTree className="h-4 w-4 text-muted-foreground" />
<div className="flex flex-wrap gap-1"> <Tooltip>
<span className="text-xs bg-primary/10 text-primary rounded-md px-2 py-1" title={snapshot.paths[0]}> <TooltipTrigger asChild>
{snapshot.paths[0].split("/").filter(Boolean).at(-2) || "/"} <span className="text-xs bg-primary/10 text-primary rounded-md px-2 py-1 cursor-help">
</span> {snapshot.paths.length} {snapshot.paths.length === 1 ? "path" : "paths"}
<Tooltip> </span>
<TooltipTrigger asChild> </TooltipTrigger>
<span <TooltipContent side="top" className="max-w-md">
className={`text-xs bg-muted text-muted-foreground rounded-md px-2 py-1 cursor-help ${snapshot.paths.length <= 1 ? "hidden" : ""}`} <div className="flex flex-col gap-1">
> {snapshot.paths.map((path) => (
+{snapshot.paths.length - 1} <div key={`${snapshot.short_id}-${path}`} className="text-xs font-mono">
</span> {path}
</TooltipTrigger> </div>
<TooltipContent side="top" className="max-w-md"> ))}
<div className="flex flex-col gap-1"> </div>
{snapshot.paths.slice(1).map((path) => ( </TooltipContent>
<div key={`${snapshot.short_id}-${path}`} className="text-xs"> </Tooltip>
{path}
</div>
))}
</div>
</TooltipContent>
</Tooltip>
</div>
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>

View File

@@ -56,32 +56,41 @@ export const ScheduleSummary = (props: Props) => {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
<Card> <Card>
<CardHeader className="flex flex-row items-center justify-between gap-4"> <CardHeader className="space-y-4">
<div> <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<CardTitle>Backup schedule</CardTitle> <div>
<CardDescription> <CardTitle>Backup schedule</CardTitle>
Automated backup configuration for volume{" "} <CardDescription>
<strong className="text-strong-accent">{schedule.volume.name}</strong> Automated backup configuration for volume&nbsp;
</CardDescription> <strong className="text-strong-accent">{schedule.volume.name}</strong>
</CardDescription>
</div>
<div className="flex items-center gap-2 justify-between sm:justify-start">
<OnOff
isOn={schedule.enabled}
toggle={handleToggleEnabled}
enabledLabel="Enabled"
disabledLabel="Paused"
/>
</div>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex flex-col sm:flex-row gap-2">
<OnOff isOn={schedule.enabled} toggle={handleToggleEnabled} enabledLabel="Enabled" disabledLabel="Paused" /> <Button variant="default" size="sm" onClick={handleRunBackupNow} className="w-full sm:w-auto">
<Button variant="default" size="sm" onClick={handleRunBackupNow}>
<Play className="h-4 w-4 mr-2" /> <Play className="h-4 w-4 mr-2" />
Backup Now <span className="sm:inline">Backup Now</span>
</Button> </Button>
<Button variant="outline" size="sm" onClick={() => setIsEditMode(true)}> <Button variant="outline" size="sm" onClick={() => setIsEditMode(true)} className="w-full sm:w-auto">
<Pencil className="h-4 w-4 mr-2" /> <Pencil className="h-4 w-4 mr-2" />
Edit schedule <span className="sm:inline">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" className="text-destructive hover:text-destructive w-full sm:w-auto"
> >
<Trash2 className="h-4 w-4 mr-2" /> <Trash2 className="h-4 w-4 mr-2" />
Delete <span className="sm:inline">Delete</span>
</Button> </Button>
</div> </div>
</CardHeader> </CardHeader>