style: improve wording and error displays

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-0.5 -top-0.5 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 -left-0.5 -top-0.5 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-0.5 -top-0.5 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 -right-0.5 -top-0.5 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-0.5 -bottom-0.5 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 -left-0.5 -bottom-0.5 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-0.5 -bottom-0.5 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 -right-0.5 -bottom-0.5 h-4 w-0.5 bg-white/80" />
 			</span>
 			{children}
 		</div>

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

@@ -105,7 +105,7 @@ export const ScheduleSummary = (props: Props) => {
 							/>
 						</div>
 					</div>
-					<div className="flex flex-col @md: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 @md:w-auto">
 								<Square className="h-4 w-4 mr-2" />
@@ -144,7 +144,7 @@ export const ScheduleSummary = (props: Props) => {
 						</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>
@@ -180,17 +180,19 @@ export const ScheduleSummary = (props: Props) => {
 					{schedule.lastBackupStatus === "warning" && (
 						<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 && (
+					{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="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 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">
+				<CardContent className="flex items-center justify-center text-center">
-					<p className="text-destructive">Error loading snapshots: {error}</p>
+					<p className="text-destructive text-sm">{error}</p>
-				</div>
+				</CardContent>
 			</Card>
 		);
 	}

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">
+						<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">{repository.lastError}</p>
+							<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">