fix: accessibility and responsiveness fixes

apps/client/app/components/layout.tsx

@@ -15,73 +15,84 @@ import { AppSidebar } from "./app-sidebar";
 export const clientMiddleware = [authMiddleware];
 
 export async function clientLoader({ context }: Route.LoaderArgs) {
-	const ctx = context.get(appContext);
+  const ctx = context.get(appContext);
 
-	if (ctx.user && !ctx.user.hasDownloadedResticPassword) {
-		throw redirect("/download-recovery-key");
-	}
+  if (ctx.user && !ctx.user.hasDownloadedResticPassword) {
+    throw redirect("/download-recovery-key");
+  }
 
-	return ctx;
+  return ctx;
 }
 
 export default function Layout({ loaderData }: Route.ComponentProps) {
-	const navigate = useNavigate();
+  const navigate = useNavigate();
 
-	const logout = useMutation({
-		...logoutMutation(),
-		onSuccess: async () => {
-			navigate("/login", { replace: true });
-		},
-		onError: (error) => {
-			console.error(error);
-			toast.error("Logout failed", { description: error.message });
-		},
-	});
+  const logout = useMutation({
+    ...logoutMutation(),
+    onSuccess: async () => {
+      navigate("/login", { replace: true });
+    },
+    onError: (error) => {
+      console.error(error);
+      toast.error("Logout failed", { description: error.message });
+    },
+  });
 
-	return (
-		<SidebarProvider defaultOpen={true}>
-			<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 flex-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">
-							<SidebarTrigger />
-							<AppBreadcrumb />
-						</div>
-						{loaderData.user && (
-							<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>
-								<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">
-									<a
-										href="https://github.com/nicotsx/ironmount/issues/new"
-										target="_blank"
-										rel="noreferrer"
-										className="flex items-center gap-2"
-									>
-										<span className="flex items-center gap-2">
-											<LifeBuoy />
-											<span>Report an issue</span>
-										</span>
-									</a>
-								</Button>
-							</div>
-						)}
-					</div>
-				</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">
-							<Outlet />
-						</main>
-					</GridBackground>
-				</div>
-			</div>
-		</SidebarProvider>
-	);
+  return (
+    <SidebarProvider defaultOpen={true}>
+      <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 flex-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">
+              <SidebarTrigger />
+              <AppBreadcrumb />
+            </div>
+            {loaderData.user && (
+              <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>
+                <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"
+                >
+                  <a
+                    href="https://github.com/nicotsx/ironmount/issues/new"
+                    target="_blank"
+                    rel="noreferrer"
+                    className="flex items-center gap-2"
+                  >
+                    <span className="flex items-center gap-2">
+                      <LifeBuoy />
+                      <span>Report an issue</span>
+                    </span>
+                  </a>
+                </Button>
+              </div>
+            )}
+          </div>
+        </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">
+              <Outlet />
+            </main>
+          </GridBackground>
+        </div>
+      </div>
+    </SidebarProvider>
+  );
 }