style: responsive fixes (#282)

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

* style: fix breadcrumbs breaking the layout on smaller devices

* style: improve wording and error displays

* chore: wording

app/client/components/app-breadcrumb.tsx

@@ -38,7 +38,7 @@ export function AppBreadcrumb() {
 	}
 
 	return (
-		<Breadcrumb>
+		<Breadcrumb className="min-w-0">
 			<BreadcrumbList>
 				{breadcrumbs.map((breadcrumb, index) => {
 					const isLast = index === breadcrumbs.length - 1;

app/client/components/layout.tsx

@@ -43,8 +43,8 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
 			<AppSidebar />
 			<div className="w-full relative flex flex-col h-screen overflow-hidden">
 				<header className="z-50 bg-card-header border-b border-border/50 shrink-0">
-					<div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-8 mx-auto container">
-						<div className="flex items-center gap-4">
+					<div className="flex items-center justify-between py-3 sm:py-4 px-2 sm:px-8 mx-auto container gap-4">
+						<div className="flex items-center gap-4 min-w-0">
 							<SidebarTrigger />
 							<AppBreadcrumb />
 						</div>
@@ -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>

app/client/components/ui/breadcrumb.tsx

@@ -4,8 +4,8 @@ import { ChevronRight, MoreHorizontal } from "lucide-react";
 
 import { cn } from "~/client/lib/utils";
 
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
-	return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+	return <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn("min-w-0", className)} {...props} />;
 }
 
 function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
@@ -13,7 +13,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
 		<ol
 			data-slot="breadcrumb-list"
 			className={cn(
-				"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-words sm:gap-2.5",
+				"text-muted-foreground flex items-center gap-1.5 text-sm sm:gap-2.5 min-w-0",
 				className,
 			)}
 			{...props}
@@ -22,7 +22,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
 }
 
 function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
-	return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5", className)} {...props} />;
+	return <li data-slot="breadcrumb-item" className={cn("inline-flex items-center gap-1.5 min-w-0", className)} {...props} />;
 }
 
 function BreadcrumbLink({
@@ -35,7 +35,11 @@ function BreadcrumbLink({
 	const Comp = asChild ? Slot : "a";
 
 	return (
-		<Comp data-slot="breadcrumb-link" className={cn("hover:text-foreground transition-colors", className)} {...props} />
+		<Comp
+			data-slot="breadcrumb-link"
+			className={cn("hover:text-foreground transition-colors truncate", className)}
+			{...props}
+		/>
 	);
 }
 
@@ -46,7 +50,7 @@ function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
 			role="link"
 			aria-disabled="true"
 			aria-current="page"
-			className={cn("text-foreground font-normal", className)}
+			className={cn("text-foreground font-normal truncate", className)}
 			{...props}
 		/>
 	);

app/client/components/ui/card.tsx

@@ -10,14 +10,14 @@ function Card({ className, children, ...props }: React.ComponentProps<"div">) {
 			{...props}
 		>
 			<span aria-hidden="true" className="pointer-events-none absolute inset-0 z-10 select-none">
-				<span className="absolute left-[-2px] top-[-2px] h-0.5 w-4 bg-white/80" />
-				<span className="absolute left-[-2px] top-[-2px] h-4 w-0.5 bg-white/80" />
-				<span className="absolute right-[-2px] top-[-2px] h-0.5 w-4 bg-white/80" />
-				<span className="absolute right-[-2px] top-[-2px] h-4 w-0.5 bg-white/80" />
-				<span className="absolute left-[-2px] bottom-[-2px] h-0.5 w-4 bg-white/80" />
-				<span className="absolute left-[-2px] bottom-[-2px] h-4 w-0.5 bg-white/80" />
-				<span className="absolute right-[-2px] bottom-[-2px] h-0.5 w-4 bg-white/80" />
-				<span className="absolute right-[-2px] bottom-[-2px] h-4 w-0.5 bg-white/80" />
+				<span className="absolute -left-0.5 -top-0.5 h-0.5 w-4 bg-white/80" />
+				<span className="absolute -left-0.5 -top-0.5 h-4 w-0.5 bg-white/80" />
+				<span className="absolute -right-0.5 -top-0.5 h-0.5 w-4 bg-white/80" />
+				<span className="absolute -right-0.5 -top-0.5 h-4 w-0.5 bg-white/80" />
+				<span className="absolute -left-0.5 -bottom-0.5 h-0.5 w-4 bg-white/80" />
+				<span className="absolute -left-0.5 -bottom-0.5 h-4 w-0.5 bg-white/80" />
+				<span className="absolute -right-0.5 -bottom-0.5 h-0.5 w-4 bg-white/80" />
+				<span className="absolute -right-0.5 -bottom-0.5 h-4 w-0.5 bg-white/80" />
 			</span>
 			{children}
 		</div>

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

@@ -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"

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

@@ -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>

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

@@ -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>

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

@@ -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 @lg: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 grid-cols-1 @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,19 +178,21 @@ 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">
+							<p className="font-mono text-sm text-yellow-600 whitespace-pre-wrap wrap-break-word">
 								{schedule.lastBackupError ??
 									"Last backup completed with warnings. Check your container logs for more details."}
 							</p>
 						</div>
 					)}
 
-					{schedule.lastBackupError && (
-						<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>
+					{schedule.lastBackupError && schedule.lastBackupStatus === "error" && (
+						<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 wrap-break-word">
+								{schedule.lastBackupError}
+							</p>
 						</div>
 					)}
 				</CardContent>

app/client/modules/backups/components/snapshot-timeline.tsx

@@ -1,5 +1,5 @@
 import { cn } from "~/client/lib/utils";
-import { Card } from "~/client/components/ui/card";
+import { Card, CardContent } from "~/client/components/ui/card";
 import { ByteSize } from "~/client/components/bytes-size";
 import { useEffect } from "react";
 import type { ListSnapshotsResponse } from "~/client/api-client";
@@ -24,9 +24,9 @@ export const SnapshotTimeline = (props: Props) => {
 	if (error) {
 		return (
 			<Card>
-				<div className="flex items-center justify-center h-24 p-4 text-center">
-					<p className="text-destructive">Error loading snapshots: {error}</p>
-				</div>
+				<CardContent className="flex items-center justify-center text-center">
+					<p className="text-destructive text-sm">{error}</p>
+				</CardContent>
 			</Card>
 		);
 	}

app/client/modules/backups/routes/backups.tsx

@@ -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;

app/client/modules/repositories/components/create-repository-form.tsx

@@ -226,12 +226,13 @@ export const CreateRepositoryForm = ({
 									</SelectTrigger>
 								</FormControl>
 								<SelectContent>
-									<SelectItem value="default">Use Zerobyte's password</SelectItem>
+									<SelectItem value="default">Use the existing recovery key</SelectItem>
 									<SelectItem value="custom">Enter password manually</SelectItem>
 								</SelectContent>
 							</Select>
 							<FormDescription>
-								Choose whether to use Zerobyte's master password or enter a custom password for the existing repository.
+								Choose whether to use Zerobyte's recovery key (which you downloaded when creating your account) or enter
+								a custom password for the existing repository.
 							</FormDescription>
 						</FormItem>
 

app/client/modules/repositories/tabs/info.tsx

@@ -147,7 +147,7 @@ export const RepositoryInfoTabContent = ({ repository }: Props) => {
 								<h3 className="text-lg font-semibold text-red-500">Last Error</h3>
 							</div>
 							<div className="bg-red-500/10 border border-red-500/20 rounded-md p-4">
-								<p className="text-sm text-red-500">{repository.lastError}</p>
+								<p className="text-sm text-red-500 wrap-break-word">{repository.lastError}</p>
 							</div>
 						</div>
 					)}

app/client/modules/repositories/tabs/snapshots.tsx

@@ -46,13 +46,13 @@ export const RepositorySnapshotsTabContent = ({ repository }: Props) => {
 			<Card>
 				<CardContent className="flex flex-col items-center justify-center text-center py-12">
 					<Database className="mb-4 h-12 w-12 text-destructive" />
-					<p className="text-destructive font-semibold">Repository Error</p>
+					<p className="text-destructive font-semibold">Repository error</p>
 					<p className="text-sm text-muted-foreground mt-2">
 						This repository is in an error state and cannot be accessed.
 					</p>
 					{repository.lastError && (
-						<div className="mt-4 max-w-md bg-destructive/10 border border-destructive/20 rounded-md p-3">
-							<p className="text-sm text-destructive">{repository.lastError}</p>
+						<div className="mt-4 w-full max-w-md bg-destructive/10 border border-destructive/20 rounded-md p-3">
+							<p className="text-sm text-destructive wrap-break-word">{repository.lastError}</p>
 						</div>
 					)}
 				</CardContent>

app/client/modules/settings/routes/settings.tsx

@@ -206,7 +206,7 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 					<Download className="size-5" />
 					Backup Recovery Key
 				</CardTitle>
-				<CardDescription className="mt-1.5">Download your Restic password file for disaster recovery</CardDescription>
+				<CardDescription className="mt-1.5">Download your recovery key for Restic backups</CardDescription>
 			</div>
 			<CardContent className="p-6 space-y-4">
 				<p className="text-sm text-muted-foreground max-w-2xl">
@@ -219,15 +219,15 @@ export default function Settings({ loaderData }: Route.ComponentProps) {
 					<DialogTrigger asChild>
 						<Button variant="outline">
 							<Download size={16} className="mr-2" />
-							Download Restic Password
+							Download recovery key
 						</Button>
 					</DialogTrigger>
 					<DialogContent>
 						<form onSubmit={handleDownloadResticPassword}>
 							<DialogHeader>
-								<DialogTitle>Download Restic Password</DialogTitle>
+								<DialogTitle>Download Recovery Key</DialogTitle>
 								<DialogDescription>
-									For security reasons, please enter your account password to download the Restic password file.
+									For security reasons, please enter your account password to download the recovery key file.
 								</DialogDescription>
 							</DialogHeader>
 							<div className="space-y-4 py-4">