Tighten settings nav and add Escape back navigation

juliusmarminge · juliusmarminge · commit f6e4970a10d6 · 2026-03-28T14:58:40.000-07:00
- Reduce settings sidebar typography for a denser layout
- Close settings with Escape by navigating back
diff --git 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
@@ -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">

Original file line number	Diff line number	Diff line change
`@@ -41,8 +41,8 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {`
`41`	`41`	`isActive={isActive}`
`42`	`42`	`className={`
`43`	`43`	`isActive`
`44`		`- ? "gap-2 px-2 py-2 text-left text-sm text-foreground"`
`45`		`- : "gap-2 px-2 py-2 text-left text-sm text-muted-foreground hover:text-foreground/80"`
	`44`	`+ ? "gap-2 px-2 py-2 text-left text-xs text-foreground"`
	`45`	`+ : "gap-2 px-2 py-2 text-left text-xs text-muted-foreground hover:text-foreground/80"`
`46`	`46`	`}`
`47`	`47`	`onClick={() => void navigate({ to: item.to, replace: true })}`
`48`	`48`	`>`
`@@ -68,7 +68,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {`
`68`	`68`	`<SidebarMenuItem>`
`69`	`69`	`<SidebarMenuButton`
`70`	`70`	`size="sm"`
`71`		`- className="gap-2 px-2 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"`
	`71`	`+ className="gap-2 px-2 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-foreground"`
`72`	`72`	`onClick={() => window.history.back()}`
`73`	`73`	`>`
`74`	`74`	`<ArrowLeftIcon className="size-4" />`