From f6e4970a10d60ac65b055b19f6abe3cf29f9e27f Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Sat, 28 Mar 2026 14:58:40 -0700
Subject: [PATCH] Tighten settings nav and add Escape back navigation

- Reduce settings sidebar typography for a denser layout
- Close settings with Escape by navigating back
---
 .../components/settings/SettingsSidebarNav.tsx  |  6 +++---
 apps/web/src/routes/settings.tsx                | 17 ++++++++++++++++-
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/components/settings/SettingsSidebarNav.tsx b/apps/web/src/components/settings/SettingsSidebarNav.tsx
index ffca1e2092..20914b499d 100644
--- a/apps/web/src/components/settings/SettingsSidebarNav.tsx
+++ b/apps/web/src/components/settings/SettingsSidebarNav.tsx
@@ -41,8 +41,8 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
                     isActive={isActive}
                     className={
                       isActive
-                        ? "gap-2 px-2 py-2 text-left text-sm text-foreground"
-                        : "gap-2 px-2 py-2 text-left text-sm text-muted-foreground hover:text-foreground/80"
+                        ? "gap-2 px-2 py-2 text-left text-xs text-foreground"
+                        : "gap-2 px-2 py-2 text-left text-xs text-muted-foreground hover:text-foreground/80"
                     }
                     onClick={() => void navigate({ to: item.to, replace: true })}
                   >
@@ -68,7 +68,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
           <SidebarMenuItem>
             <SidebarMenuButton
               size="sm"
-              className="gap-2 px-2 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
+              className="gap-2 px-2 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"
               onClick={() => window.history.back()}
             >
               <ArrowLeftIcon className="size-4" />
diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index edee426732..45096fd6d6 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -1,6 +1,6 @@
 import { RotateCcwIcon } from "lucide-react";
 import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { useSettingsRestore } from "../components/settings/SettingsPanels";
 import { Button } from "../components/ui/button";
@@ -13,6 +13,21 @@ function SettingsContentLayout() {
     setRestoreSignal((value) => value + 1),
   );
 
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      if (event.key === "Escape") {
+        event.preventDefault();
+        window.history.back();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+
   return (
     <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">
       <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">