fix: accessibility and responsiveness fixes

.dockerignore

@@ -1,4 +1,4 @@
-*
+**
 
 !turbo.json
 !bun.lock
@@ -20,6 +20,11 @@
 !packages/**/src/**
 
 # License files and attributions
+
 !LICENSE
 !NOTICES.md
 !LICENSES/**
+
+# Node modules
+
+**/node_modules/**

apps/client/app/app.css

@@ -5,23 +5,24 @@
 @custom-variant dark (&:is(.dark *));
 
 @theme {
+  --breakpoint-xs: 32rem;
   --font-sans:
-		"Google Sans Code", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    "Google Sans Code", ui-sans-serif, system-ui, sans-serif,
-		"Noto Color Emoji";
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 html,
 body {
-	@apply bg-white dark:bg-[#131313];
   overflow-x: hidden;
   width: 100%;
   position: relative;
   overscroll-behavior: none;
   scrollbar-width: thin;
+}
 
-	@media (prefers-color-scheme: dark) {
+body {
-		color-scheme: dark;
+  @apply bg-[#131313];
-	}
+  min-height: 100dvh;
 }
 
 .main-content {
@@ -70,8 +71,6 @@ body {
 }
 
 :root {
-	color-scheme: dark;
-
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
@@ -109,6 +108,8 @@ body {
 }
 
 .dark {
+  color-scheme: dark;
+
   --background: #131313;
   --foreground: oklch(0.985 0 0);
   --card: #131313;

apps/client/app/components/auth-layout.tsx

@@ -9,7 +9,7 @@ type AuthLayoutProps = {
 
 export function AuthLayout({ title, description, children }: AuthLayoutProps) {
   return (
-		<div className="flex min-h-screen">
+    <div className="flex mt-[25%] lg:mt-0 lg:min-h-screen">
       <div className="flex flex-1 items-center justify-center bg-background p-8">
         <div className="w-full max-w-md space-y-8">
           <div className="flex items-center gap-3">
@@ -26,7 +26,7 @@ export function AuthLayout({ title, description, children }: AuthLayoutProps) {
         </div>
       </div>
       <div
-				className="hidden lg:block lg:flex-1 dither-xl bg-cover bg-center"
+        className="hidden lg:block lg:flex-1 dither-lg bg-cover bg-center"
         style={{ backgroundImage: "url(/images/background.jpg)" }}
       />
     </div>

apps/client/app/components/layout.tsx

@@ -52,12 +52,23 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
               <div className="flex items-center gap-4">
                 <span className="text-sm text-muted-foreground hidden md:inline-flex">
                   Welcome,&nbsp;
-									<span className="text-strong-accent">{loaderData.user?.username}</span>
+                  <span className="text-strong-accent">
+                    {loaderData.user?.username}
                   </span>
-								<Button variant="default" size="sm" onClick={() => logout.mutate({})} loading={logout.isPending}>
+                </span>
+                <Button
+                  variant="default"
+                  size="sm"
+                  onClick={() => logout.mutate({})}
+                  loading={logout.isPending}
+                >
                   Logout
                 </Button>
-								<Button variant="default" size="sm" className="relative overflow-hidden hidden lg:inline-flex">
+                <Button
+                  variant="default"
+                  size="sm"
+                  className="relative overflow-hidden hidden lg:inline-flex"
+                >
                   <a
                     href="https://github.com/nicotsx/ironmount/issues/new"
                     target="_blank"
@@ -76,7 +87,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 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">
               <Outlet />
             </main>
           </GridBackground>

apps/client/app/components/onoff.tsx

@@ -9,18 +9,29 @@ type Props = {
   disabled?: boolean;
 };
 
-export const OnOff = ({ isOn, toggle, enabledLabel, disabledLabel, disabled }: Props) => {
+export const OnOff = ({
+  isOn,
+  toggle,
+  enabledLabel,
+  disabledLabel,
+  disabled,
+}: Props) => {
   return (
     <div
       className={cn(
         "flex items-center gap-2 rounded-full border px-3 py-1.5 text-xs font-semibold uppercase tracking-wide transition-colors",
         isOn
           ? "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-500/40 dark:bg-emerald-500/10 dark:text-emerald-200"
-					: "border-muted bg-muted/40 text-muted-foreground dark:border-muted/60 dark:bg-muted/10",
+          : "border-muted bg-muted/40 text-muted-foreground dark:border-muted/60 dark:bg-muted/10"
       )}
     >
       <span>{isOn ? enabledLabel : disabledLabel}</span>
-			<Switch disabled={disabled} checked={isOn} onCheckedChange={toggle} />
+      <Switch
+        disabled={disabled}
+        checked={isOn}
+        onCheckedChange={toggle}
+        aria-label={isOn ? `Toggle ${enabledLabel}` : `Toggle ${disabledLabel}`}
+      />
     </div>
   );
 };

apps/client/app/components/status-dot.tsx

@@ -34,11 +34,17 @@ export const StatusDot = ({ status }: { status: VolumeStatus }) => {
             <span
               className={cn(
                 "absolute inline-flex h-full w-full animate-ping rounded-full opacity-75",
-								`${statusMapping.colorLight}`,
+                `${statusMapping.colorLight}`
               )}
             />
           )}
-					<span className={cn("relative inline-flex size-3 rounded-full", `${statusMapping.color}`)} />
+          <span
+            aria-label={status}
+            className={cn(
+              "relative inline-flex size-3 rounded-full",
+              `${statusMapping.color}`
+            )}
+          />
         </span>
       </TooltipTrigger>
       <TooltipContent>

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

@@ -232,7 +232,7 @@ export const CreateScheduleForm = ({ initialValues, formId, onSubmit, volume }:
 								onSelectionChange={handleSelectionChange}
 								withCheckboxes={true}
 								foldersOnly={true}
-								className="overflow-auto flex-1 border rounded-md bg-card p-2 min-h-[300px] max-h-[400px]"
+								className="max-w-2xs xs:max-w-screen flex-1 border rounded-md bg-card p-2 min-h-[300px] max-h-[400px]"
 							/>
 							{selectedPaths.size > 0 && (
 								<div className="mt-4">

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

@@ -40,7 +40,9 @@ export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
   if (repository.data) return repository.data;
 };
 
-export default function RepositoryDetailsPage({ loaderData }: Route.ComponentProps) {
+export default function RepositoryDetailsPage({
+  loaderData,
+}: Route.ComponentProps) {
   const { name } = useParams<{ name: string }>();
   const navigate = useNavigate();
   const queryClient = useQueryClient();
@@ -91,30 +93,37 @@ export default function RepositoryDetailsPage({ loaderData }: Route.ComponentPro
   return (
     <>
       <div className="flex items-center justify-between mb-4">
-				<div>
+        <div className="text-sm font-semibold text-muted-foreground flex items-center gap-2">
-					<div className="text-sm font-semibold mb-2 text-muted-foreground flex items-center gap-2">
           <span
             className={cn(
               "inline-flex items-center gap-2 px-2 py-1 rounded-md text-xs bg-gray-500/10 text-gray-500",
               {
                 "bg-green-500/10 text-green-500": data.status === "healthy",
                 "bg-red-500/10 text-red-500": data.status === "error",
-								},
+              }
             )}
           >
             {data.status || "unknown"}
           </span>
-						<span className="text-xs bg-primary/10 rounded-md px-2 py-1">{data.type}</span>
+          <span className="text-xs bg-primary/10 rounded-md px-2 py-1">
-					</div>
+            {data.type}
+          </span>
         </div>
         <div className="flex gap-4">
-					<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteRepo.isPending}>
+          <Button
+            variant="destructive"
+            onClick={() => setShowDeleteConfirm(true)}
+            disabled={deleteRepo.isPending}
+          >
             Delete
           </Button>
         </div>
       </div>
 
-			<Tabs value={activeTab} onValueChange={(value) => setSearchParams({ tab: value })}>
+      <Tabs
+        value={activeTab}
+        onValueChange={(value) => setSearchParams({ tab: value })}
+      >
         <TabsList className="mb-2">
           <TabsTrigger value="info">Configuration</TabsTrigger>
           <TabsTrigger value="snapshots">Snapshots</TabsTrigger>
@@ -132,8 +141,9 @@ export default function RepositoryDetailsPage({ loaderData }: Route.ComponentPro
           <AlertDialogHeader>
             <AlertDialogTitle>Delete repository?</AlertDialogTitle>
             <AlertDialogDescription>
-							Are you sure you want to delete the repository <strong>{name}</strong>? This action cannot be undone and
+              Are you sure you want to delete the repository{" "}
-							will remove all backup data.
+              <strong>{name}</strong>? This action cannot be undone and will
+              remove all backup data.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <div className="flex gap-3 justify-end">

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

@@ -18,14 +18,21 @@ export function meta({ params }: Route.MetaArgs) {
 }
 
 export const clientLoader = async ({ params }: Route.ClientLoaderArgs) => {
-	const snapshot = await getSnapshotDetails({ path: { name: params.name, snapshotId: params.snapshotId } });
+  const snapshot = await getSnapshotDetails({
+    path: { name: params.name, snapshotId: params.snapshotId },
+  });
   if (snapshot.data) return snapshot.data;
 
   return redirect("/repositories");
 };
 
-export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps) {
+export default function SnapshotDetailsPage({
-	const { name, snapshotId } = useParams<{ name: string; snapshotId: string }>();
+  loaderData,
+}: Route.ComponentProps) {
+  const { name, snapshotId } = useParams<{
+    name: string;
+    snapshotId: string;
+  }>();
 
   const { data } = useQuery({
     ...listSnapshotFilesOptions({
@@ -48,7 +55,9 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
       <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>
+          <p className="text-sm text-muted-foreground">
+            Snapshot: {snapshotId}
+          </p>
         </div>
         <RestoreSnapshotDialog name={name} snapshotId={snapshotId} />
       </div>
@@ -64,11 +73,11 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
             <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>
+                <p className="font-mono break-all">{data.snapshot.id}</p>
               </div>
               <div>
                 <span className="text-muted-foreground">Short ID:</span>
-								<p className="font-mono">{data.snapshot.short_id}</p>
+                <p className="font-mono break-al">{data.snapshot.short_id}</p>
               </div>
               <div>
                 <span className="text-muted-foreground">Hostname:</span>
@@ -82,7 +91,10 @@ export default function SnapshotDetailsPage({ loaderData }: Route.ComponentProps
                 <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">
+                    <p
+                      key={path}
+                      className="font-mono text-xs bg-muted px-2 py-1 rounded"
+                    >
                       {path}
                     </p>
                   ))}

apps/client/app/modules/volumes/routes/volume-details.tsx

@@ -118,15 +118,14 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
 
   return (
     <>
-			<div className="flex items-center justify-between">
+      <div className="flex flex-col items-start xs:items-center xs:flex-row xs:justify-between">
-				<div>
+        <div className="text-sm font-semibold mb-2 xs:mb-0 text-muted-foreground flex items-center gap-2">
-					<div className="text-sm font-semibold mb-2 text-muted-foreground flex items-center gap-2">
           <span className="flex items-center gap-2">
-							<StatusDot status={volume.status} /> {volume.status[0].toUpperCase() + volume.status.slice(1)}
+            <StatusDot status={volume.status} />{" "}
+            {volume.status[0].toUpperCase() + volume.status.slice(1)}
           </span>
           <VolumeIcon size={14} backend={volume?.config.backend} />
         </div>
-				</div>
         <div className="flex gap-4">
           <Button
             onClick={() => mountVol.mutate({ path: { name } })}
@@ -143,12 +142,20 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
           >
             Unmount
           </Button>
-					<Button variant="destructive" onClick={() => setShowDeleteConfirm(true)} disabled={deleteVol.isPending}>
+          <Button
+            variant="destructive"
+            onClick={() => setShowDeleteConfirm(true)}
+            disabled={deleteVol.isPending}
+          >
             Delete
           </Button>
         </div>
       </div>
-			<Tabs value={activeTab} onValueChange={(value) => setSearchParams({ tab: value })} className="mt-4">
+      <Tabs
+        value={activeTab}
+        onValueChange={(value) => setSearchParams({ tab: value })}
+        className="mt-4"
+      >
         <TabsList className="mb-2">
           <TabsTrigger value="info">Configuration</TabsTrigger>
           <TabsTrigger value="files">Files</TabsTrigger>
@@ -172,7 +179,8 @@ export default function VolumeDetails({ loaderData }: Route.ComponentProps) {
           <AlertDialogHeader>
             <AlertDialogTitle>Delete volume?</AlertDialogTitle>
             <AlertDialogDescription>
-							Are you sure you want to delete the volume <strong>{name}</strong>? This action cannot be undone.
+              Are you sure you want to delete the volume <strong>{name}</strong>
+              ? This action cannot be undone.
             </AlertDialogDescription>
           </AlertDialogHeader>
           <div className="flex gap-3 justify-end">

apps/client/app/root.tsx

@@ -1,5 +1,16 @@
-import { MutationCache, QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
-import { isRouteErrorResponse, Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
+  MutationCache,
+  QueryClient,
+  QueryClientProvider,
+} from "@tanstack/react-query";
+import {
+  isRouteErrorResponse,
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "react-router";
 import { Toaster } from "~/components/ui/sonner";
 
 import type { Route } from "./+types/root";
@@ -38,21 +49,37 @@ const queryClient = new QueryClient({
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
-		<html lang="en" style={{ colorScheme: "dark" }} className="dark">
+    <html lang="en">
       <head>
         <meta charSet="utf-8" />
-				<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
+        <meta
-				<link rel="icon" type="image/png" href="/images/favicon/favicon-96x96.png" sizes="96x96" />
+          name="viewport"
-				<link rel="icon" type="image/svg+xml" href="/images/favicon/favicon.svg" />
+          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          href="/images/favicon/favicon-96x96.png"
+          sizes="96x96"
+        />
+        <link
+          rel="icon"
+          type="image/svg+xml"
+          href="/images/favicon/favicon.svg"
+        />
         <link rel="shortcut icon" href="/images/favicon/favicon.ico" />
-				<link rel="apple-touch-icon" sizes="180x180" href="/images/favicon/apple-touch-icon.png" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/images/favicon/apple-touch-icon.png"
+        />
         <meta name="apple-mobile-web-app-title" content="Ironmount" />
         <link rel="manifest" href="/images/favicon/site.webmanifest" />
         <Meta />
         <Links />
       </head>
       <QueryClientProvider client={queryClient}>
-				<body>
+        <body className="dark">
           {children}
           <Toaster />
           <ScrollRestoration />
@@ -76,7 +103,10 @@ export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
 
   if (isRouteErrorResponse(error)) {
     message = error.status === 404 ? "404" : "Error";
-		details = error.status === 404 ? "The requested page could not be found." : error.statusText || details;
+    details =
+      error.status === 404
+        ? "The requested page could not be found."
+        : error.statusText || details;
   } else if (import.meta.env.DEV && error && error instanceof Error) {
     details = error.message;
     stack = error.stack;

apps/client/vite.config.ts

@@ -29,5 +29,6 @@ export default defineConfig({
         changeOrigin: true,
       },
     },
+    allowedHosts: true,
   },
 });