style: fix snapshots table

apps/client/app/components/snapshots-table.tsx

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

apps/client/app/modules/backups/components/schedule-summary.tsx

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