fix: accessibility and responsiveness fixes

apps/client/app/modules/repositories/routes/snapshot-details.tsx

@@ -8,90 +8,102 @@ import { getSnapshotDetails } from "~/api-client";
 import type { Route } from "./+types/snapshot-details";
 
 export function meta({ params }: Route.MetaArgs) {
-	return [
-		{ title: `Snapshot ${params.snapshotId}` },
-		{
-			name: "description",
-			content: "Browse and restore files from a backup snapshot.",
-		},
-	];
+  return [
+    { title: `Snapshot ${params.snapshotId}` },
+    {
+      name: "description",
+      content: "Browse and restore files from a backup snapshot.",
+    },
+  ];
 }
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
-	const snapshot = await getSnapshotDetails({ path: { name: params.name, snapshotId: params.snapshotId } });
-	if (snapshot.data) return snapshot.data;
+  const snapshot = await getSnapshotDetails({
+    path: { name: params.name, snapshotId: params.snapshotId },
+  });
+  if (snapshot.data) return snapshot.data;
 
-	return redirect("/repositories");
+  return redirect("/repositories");
 };
 
-export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps) {
-	const { name, snapshotId } = useParams<{ name: string; snapshotId: string }>();
+export default function SnapshotDetailsPage({
+  loaderData,
+}: Route.ComponentProps) {
+  const { name, snapshotId } = useParams<{
+    name: string;
+    snapshotId: string;
+  }>();
 
-	const { data } = useQuery({
-		...listSnapshotFilesOptions({
-			path: { name: name ?? "", snapshotId: snapshotId ?? "" },
-			query: { path: "/" },
-		}),
-		enabled: !!name && !!snapshotId,
-	});
+  const { data } = useQuery({
+    ...listSnapshotFilesOptions({
+      path: { name: name ?? "", snapshotId: snapshotId ?? "" },
+      query: { path: "/" },
+    }),
+    enabled: !!name && !!snapshotId,
+  });
 
-	if (!name || !snapshotId) {
-		return (
-			<div className="flex items-center justify-center h-full">
-				<p className="text-destructive">Invalid snapshot reference</p>
-			</div>
-		);
-	}
+  if (!name || !snapshotId) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <p className="text-destructive">Invalid snapshot reference</p>
+      </div>
+    );
+  }
 
-	return (
-		<div className="space-y-4">
-			<div className="flex items-center justify-between">
-				<div>
-					<h1 className="text-2xl font-bold">{name}</h1>
-					<p className="text-sm text-muted-foreground">Snapshot: {snapshotId}</p>
-				</div>
-				<RestoreSnapshotDialog name={name} snapshotId={snapshotId} />
-			</div>
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">{name}</h1>
+          <p className="text-sm text-muted-foreground">
+            Snapshot: {snapshotId}
+          </p>
+        </div>
+        <RestoreSnapshotDialog name={name} snapshotId={snapshotId} />
+      </div>
 
-			<SnapshotFileBrowser repositoryName={name} snapshot={loaderData} />
+      <SnapshotFileBrowser repositoryName={name} snapshot={loaderData} />
 
-			{data?.snapshot && (
-				<Card>
-					<CardHeader>
-						<CardTitle>Snapshot Information</CardTitle>
-					</CardHeader>
-					<CardContent className="space-y-2 text-sm">
-						<div className="grid grid-cols-2 gap-4">
-							<div>
-								<span className="text-muted-foreground">Snapshot ID:</span>
-								<p className="font-mono">{data.snapshot.id}</p>
-							</div>
-							<div>
-								<span className="text-muted-foreground">Short ID:</span>
-								<p className="font-mono">{data.snapshot.short_id}</p>
-							</div>
-							<div>
-								<span className="text-muted-foreground">Hostname:</span>
-								<p>{data.snapshot.hostname}</p>
-							</div>
-							<div>
-								<span className="text-muted-foreground">Time:</span>
-								<p>{new Date(data.snapshot.time).toLocaleString()}</p>
-							</div>
-							<div className="col-span-2">
-								<span className="text-muted-foreground">Paths:</span>
-								<div className="space-y-1 mt-1">
-									{data.snapshot.paths.map((path) => (
-										<p key={path} className="font-mono text-xs bg-muted px-2 py-1 rounded">
-											{path}
-										</p>
-									))}
-								</div>
-							</div>
-						</div>
-					</CardContent>
-				</Card>
-			)}
-		</div>
-	);
+      {data?.snapshot && (
+        <Card>
+          <CardHeader>
+            <CardTitle>Snapshot Information</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm">
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <span className="text-muted-foreground">Snapshot ID:</span>
+                <p className="font-mono break-all">{data.snapshot.id}</p>
+              </div>
+              <div>
+                <span className="text-muted-foreground">Short ID:</span>
+                <p className="font-mono break-al">{data.snapshot.short_id}</p>
+              </div>
+              <div>
+                <span className="text-muted-foreground">Hostname:</span>
+                <p>{data.snapshot.hostname}</p>
+              </div>
+              <div>
+                <span className="text-muted-foreground">Time:</span>
+                <p>{new Date(data.snapshot.time).toLocaleString()}</p>
+              </div>
+              <div className="col-span-2">
+                <span className="text-muted-foreground">Paths:</span>
+                <div className="space-y-1 mt-1">
+                  {data.snapshot.paths.map((path) => (
+                    <p
+                      key={path}
+                      className="font-mono text-xs bg-muted px-2 py-1 rounded"
+                    >
+                      {path}
+                    </p>
+                  ))}
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
 }