From ccc1aee78706132967ff9d0986e63ca99ec2b374 Mon Sep 17 00:00:00 2001
From: Eva Decker <eva@namesake.fyi>
Date: Sat, 23 Nov 2024 02:43:04 -0500
Subject: [PATCH] feat: Adjust responsive padding (#205)

---
 .changeset/short-rats-beam.md                 |  5 ++
 src/components/AppContent/AppContent.tsx      |  7 +++
 src/components/AppContent/index.ts            |  1 +
 src/components/AppSidebar/AppSidebar.tsx      | 12 ++--
 src/components/Badge/Badge.tsx                |  2 +-
 src/components/Container/Container.tsx        |  2 +-
 src/components/Nav/Nav.tsx                    | 12 ++--
 src/components/PageHeader/PageHeader.tsx      |  6 +-
 src/components/ProgressBar/ProgressBar.tsx    | 20 +++++--
 src/components/StatusSelect/StatusSelect.tsx  | 31 +++++-----
 src/components/index.ts                       |  1 +
 src/routeTree.gen.ts                          | 56 +++++++++----------
 src/routes/_authenticated/_home.tsx           | 21 ++++++-
 .../_authenticated/_home/quests.$questId.tsx  |  9 +--
 src/routes/_authenticated/admin/route.tsx     | 35 +++++++-----
 src/routes/_authenticated/browse/index.tsx    |  7 ++-
 .../settings/{overview.tsx => account.tsx}    |  8 +--
 src/routes/_authenticated/settings/index.tsx  |  2 +-
 src/routes/_authenticated/settings/route.tsx  | 29 ++++++----
 src/styles/index.css                          | 10 ++++
 20 files changed, 177 insertions(+), 99 deletions(-)
 create mode 100644 .changeset/short-rats-beam.md
 create mode 100644 src/components/AppContent/AppContent.tsx
 create mode 100644 src/components/AppContent/index.ts
 rename src/routes/_authenticated/settings/{overview.tsx => account.tsx} (96%)

diff --git a/.changeset/short-rats-beam.md b/.changeset/short-rats-beam.md
new file mode 100644
index 0000000..6b63ee4
--- /dev/null
+++ b/.changeset/short-rats-beam.md
@@ -0,0 +1,5 @@
+---
+"namesake": patch
+---
+
+Adjust responsive padding and margins
diff --git a/src/components/AppContent/AppContent.tsx b/src/components/AppContent/AppContent.tsx
new file mode 100644
index 0000000..bfb0917
--- /dev/null
+++ b/src/components/AppContent/AppContent.tsx
@@ -0,0 +1,7 @@
+type AppContentProps = {
+  children: React.ReactNode;
+};
+
+export const AppContent = ({ children }: AppContentProps) => {
+  return <main className="flex-1 w-full app-padding">{children}</main>;
+};
diff --git a/src/components/AppContent/index.ts b/src/components/AppContent/index.ts
new file mode 100644
index 0000000..a35c2e6
--- /dev/null
+++ b/src/components/AppContent/index.ts
@@ -0,0 +1 @@
+export * from "./AppContent";
diff --git a/src/components/AppSidebar/AppSidebar.tsx b/src/components/AppSidebar/AppSidebar.tsx
index 420a9a1..4584cc7 100644
--- a/src/components/AppSidebar/AppSidebar.tsx
+++ b/src/components/AppSidebar/AppSidebar.tsx
@@ -24,10 +24,10 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
   };
 
   return (
-    <div className="w-72 flex flex-col shrink-0 sticky top-0 h-screen -ml-4 overflow-y-auto border-r border-gray-dim">
-      <div className="flex gap-2 items-center h-16 shrink-0 px-4 sticky top-0 bg-gray-app z-20">
+    <div className="w-72 lg:w-80 xl:w-[22rem] flex flex-col shrink-0 sticky top-0 h-screen overflow-y-auto border-r border-gray-dim">
+      <div className="app-padding h-header flex gap-2 items-center shrink-0 sticky top-0 bg-gray-app z-20">
         <Link href={{ to: "/" }} className="p-1 -m-1">
-          <Logo className="h-[1.25rem]" />
+          <Logo className="h-5 lg:h-[1.35rem]" />
         </Link>
         <Badge className="-mb-1" variant="waiting">
           Beta
@@ -47,8 +47,8 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
           </TooltipTrigger>
         </div>
       </div>
-      <div className="px-4 flex-1">{children}</div>
-      <div className="px-4 h-16 shrink-0 flex items-center sticky bottom-0 bg-gray-app">
+      <div className="app-padding flex-1">{children}</div>
+      <div className="app-padding h-header -ml-3 shrink-0 flex items-center sticky bottom-0 bg-gray-app">
         <MenuTrigger>
           <Button aria-label="User settings" variant="ghost" icon={CircleUser}>
             {user?.name}
@@ -80,7 +80,7 @@ export const AppSidebar = ({ children }: AppSidebarProps) => {
           <TooltipTrigger>
             <Link
               aria-label="Settings"
-              href={{ to: "/settings/overview" }}
+              href={{ to: "/settings/account" }}
               button={{ variant: "icon" }}
             >
               <Cog size={20} />
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
index d424ba7..1fa1dfa 100644
--- a/src/components/Badge/Badge.tsx
+++ b/src/components/Badge/Badge.tsx
@@ -9,7 +9,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 const badge = tv({
-  base: "px-1 font-medium text-center inline-flex justify-center gap-1 items-center shrink-0 bg-graya-3 dark:bg-graydarka-3 text-gray-dim",
+  base: "px-1 font-medium tabular-nums text-center inline-flex justify-center gap-1 items-center shrink-0 bg-graya-3 dark:bg-graydarka-3 text-gray-dim",
   variants: {
     size: {
       xs: "text-[10px] rounded h-4 px-1 min-w-4 leading-none",
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
index 7a4cde3..219e27b 100644
--- a/src/components/Container/Container.tsx
+++ b/src/components/Container/Container.tsx
@@ -6,7 +6,7 @@ export interface ContainerProps {
 }
 
 const containerStyles = tv({
-  base: "max-w-full w-[1200px] px-4 lg:px-6 xl:px-8 mx-auto",
+  base: "max-w-full w-[1200px] mx-auto",
 });
 
 export function Container({ className, children }: ContainerProps) {
diff --git a/src/components/Nav/Nav.tsx b/src/components/Nav/Nav.tsx
index 628665f..688fdd4 100644
--- a/src/components/Nav/Nav.tsx
+++ b/src/components/Nav/Nav.tsx
@@ -15,10 +15,10 @@ interface NavItemProps {
 
 const navItemStyles = tv({
   extend: focusRing,
-  base: "rounded-md no-underline flex items-center text-sm gap-1.5 hover:bg-gray-3 dark:hover:bg-graydark-3 h-8 px-2 -mx-2 aria-current:font-semibold aria-current:text-gray-normal",
+  base: "rounded-md no-underline flex items-center text-sm lg:text-base gap-1.5 hover:bg-gray-3/50 dark:hover:bg-graydark-3/50 h-8 lg:h-9 px-2 -mx-2 aria-current:font-semibold aria-current:text-gray-normal",
   variants: {
     isActive: {
-      true: "bg-gray-3 dark:bg-graydark-3",
+      true: "bg-gray-3 hover:bg-gray-3 dark:bg-graydark-3 dark:hover:bg-graydark-3",
     },
   },
 });
@@ -70,9 +70,13 @@ interface NavGroupProps {
 export const NavGroup = ({ label, children, count }: NavGroupProps) => {
   return (
     <div className="flex flex-col gap-0.5 [&:not(:first-child)]:mt-4">
-      <Header className="text-sm h-8 font-semibold text-gray-dim border-b border-gray-4 dark:border-graydark-4 flex justify-start items-center gap-1.5">
+      <Header className="text-sm h-8 font-medium text-gray-dim border-b border-gray-4 dark:border-graydark-4 flex justify-start items-center gap-1.5">
         {label}
-        {count && <Badge size="xs">{count}</Badge>}
+        {count && (
+          <Badge size="xs" className="rounded-full">
+            {count}
+          </Badge>
+        )}
       </Header>
       {children}
     </div>
diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx
index df968fd..8bc494f 100644
--- a/src/components/PageHeader/PageHeader.tsx
+++ b/src/components/PageHeader/PageHeader.tsx
@@ -19,14 +19,16 @@ export const PageHeader = ({
   return (
     <header
       className={twMerge(
-        "h-16 flex bg-gray-app shrink-0 items-center justify-between gap-6 text-gray-normal sticky top-0 z-20",
+        "h-header flex bg-gray-app shrink-0 items-center justify-between gap-6 text-gray-normal sticky top-0 z-20",
         className,
       )}
     >
       <div className="flex flex-col gap-1">
         <div className="flex gap-2 items-center">
           {Icon && <Icon className="text-gray-dim" />}
-          <h1 className="text-xl font-medium">{title}</h1>
+          <h1 className="text-lg lg:text-2xl font-medium whitespace-nowrap">
+            {title}
+          </h1>
           {badge}
         </div>
       </div>
diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
index f360a4a..f19b560 100644
--- a/src/components/ProgressBar/ProgressBar.tsx
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -2,14 +2,20 @@ import {
   ProgressBar as AriaProgressBar,
   type ProgressBarProps as AriaProgressBarProps,
 } from "react-aria-components";
+import { twMerge } from "tailwind-merge";
 import { Label } from "../Field";
 import { composeTailwindRenderProps } from "../utils";
 
 export interface ProgressBarProps extends AriaProgressBarProps {
-  label?: string;
+  label: string;
+  labelHidden?: boolean;
 }
 
-export function ProgressBar({ label, ...props }: ProgressBarProps) {
+export function ProgressBar({
+  label,
+  labelHidden = false,
+  ...props
+}: ProgressBarProps) {
   return (
     <AriaProgressBar
       {...props}
@@ -20,9 +26,13 @@ export function ProgressBar({ label, ...props }: ProgressBarProps) {
     >
       {({ percentage, valueText, isIndeterminate }) => (
         <>
-          <div className="flex justify-between gap-2 -mt-0.5">
-            <Label className="text-gray-normal">{label}</Label>
-            <span className="text-sm text-gray-dim tabular-nums">
+          <div className="flex items-baseline justify-between gap-2 -mt-0.5">
+            <Label
+              className={twMerge("text-gray-dim", labelHidden && "sr-only")}
+            >
+              {label}
+            </Label>
+            <span className="text-xs text-gray-dim tabular-nums">
               {valueText}
             </span>
           </div>
diff --git a/src/components/StatusSelect/StatusSelect.tsx b/src/components/StatusSelect/StatusSelect.tsx
index 7fdb593..79e3771 100644
--- a/src/components/StatusSelect/StatusSelect.tsx
+++ b/src/components/StatusSelect/StatusSelect.tsx
@@ -9,6 +9,7 @@ import {
   Button,
   Menu,
   MenuItem,
+  MenuSection,
   MenuTrigger,
   Tooltip,
   TooltipTrigger,
@@ -23,7 +24,7 @@ const badgeStyles = tv({
   base: "flex items-center transition-colors rounded-full",
   variants: {
     condensed: {
-      true: "w-5 h-5 p-0",
+      true: "size-5 p-0 lg:size-6",
       false: "pr-2",
     },
   },
@@ -84,19 +85,21 @@ export function StatusSelect({ status, isCore, onChange }: StatusSelectProps) {
         disallowEmptySelection
         onSelectionChange={handleSelectionChange}
       >
-        {Object.entries(STATUS).map(([status, details]) => {
-          if (!isCore && details.isCoreOnly) return null;
-          return (
-            <MenuItem
-              key={status}
-              id={status}
-              aria-label={details.label}
-              className="h-9"
-            >
-              <StatusBadge status={status as Status} size="lg" />
-            </MenuItem>
-          );
-        })}
+        <MenuSection title="Status">
+          {Object.entries(STATUS).map(([status, details]) => {
+            if (!isCore && details.isCoreOnly) return null;
+            return (
+              <MenuItem
+                key={status}
+                id={status}
+                aria-label={details.label}
+                className="h-9"
+              >
+                <StatusBadge status={status as Status} size="lg" />
+              </MenuItem>
+            );
+          })}
+        </MenuSection>
       </Menu>
     </MenuTrigger>
   );
diff --git a/src/components/index.ts b/src/components/index.ts
index e675dbc..9afe9f0 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -1,5 +1,6 @@
 export * from "./AlertDialog";
 export * from "./AnimateChangeInHeight";
+export * from "./AppContent";
 export * from "./AppSidebar";
 export * from "./Badge";
 export * from "./Banner";
diff --git a/src/routeTree.gen.ts b/src/routeTree.gen.ts
index d6125e0..f17e9f0 100644
--- a/src/routeTree.gen.ts
+++ b/src/routeTree.gen.ts
@@ -21,8 +21,8 @@ import { Route as AuthenticatedSettingsIndexImport } from './routes/_authenticat
 import { Route as AuthenticatedBrowseIndexImport } from './routes/_authenticated/browse/index'
 import { Route as AuthenticatedAdminIndexImport } from './routes/_authenticated/admin/index'
 import { Route as AuthenticatedHomeIndexImport } from './routes/_authenticated/_home/index'
-import { Route as AuthenticatedSettingsOverviewImport } from './routes/_authenticated/settings/overview'
 import { Route as AuthenticatedSettingsDataImport } from './routes/_authenticated/settings/data'
+import { Route as AuthenticatedSettingsAccountImport } from './routes/_authenticated/settings/account'
 import { Route as AuthenticatedAdminQuestsIndexImport } from './routes/_authenticated/admin/quests/index'
 import { Route as AuthenticatedAdminFormsIndexImport } from './routes/_authenticated/admin/forms/index'
 import { Route as AuthenticatedAdminFieldsIndexImport } from './routes/_authenticated/admin/fields/index'
@@ -94,19 +94,19 @@ const AuthenticatedHomeIndexRoute = AuthenticatedHomeIndexImport.update({
   getParentRoute: () => AuthenticatedHomeRoute,
 } as any)
 
-const AuthenticatedSettingsOverviewRoute =
-  AuthenticatedSettingsOverviewImport.update({
-    id: '/overview',
-    path: '/overview',
-    getParentRoute: () => AuthenticatedSettingsRouteRoute,
-  } as any)
-
 const AuthenticatedSettingsDataRoute = AuthenticatedSettingsDataImport.update({
   id: '/data',
   path: '/data',
   getParentRoute: () => AuthenticatedSettingsRouteRoute,
 } as any)
 
+const AuthenticatedSettingsAccountRoute =
+  AuthenticatedSettingsAccountImport.update({
+    id: '/account',
+    path: '/account',
+    getParentRoute: () => AuthenticatedSettingsRouteRoute,
+  } as any)
+
 const AuthenticatedAdminQuestsIndexRoute =
   AuthenticatedAdminQuestsIndexImport.update({
     id: '/quests/',
@@ -202,6 +202,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof UnauthenticatedSigninImport
       parentRoute: typeof UnauthenticatedImport
     }
+    '/_authenticated/settings/account': {
+      id: '/_authenticated/settings/account'
+      path: '/account'
+      fullPath: '/settings/account'
+      preLoaderRoute: typeof AuthenticatedSettingsAccountImport
+      parentRoute: typeof AuthenticatedSettingsRouteImport
+    }
     '/_authenticated/settings/data': {
       id: '/_authenticated/settings/data'
       path: '/data'
@@ -209,13 +216,6 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedSettingsDataImport
       parentRoute: typeof AuthenticatedSettingsRouteImport
     }
-    '/_authenticated/settings/overview': {
-      id: '/_authenticated/settings/overview'
-      path: '/overview'
-      fullPath: '/settings/overview'
-      preLoaderRoute: typeof AuthenticatedSettingsOverviewImport
-      parentRoute: typeof AuthenticatedSettingsRouteImport
-    }
     '/_authenticated/_home/': {
       id: '/_authenticated/_home/'
       path: '/'
@@ -323,15 +323,15 @@ const AuthenticatedAdminRouteRouteWithChildren =
   )
 
 interface AuthenticatedSettingsRouteRouteChildren {
+  AuthenticatedSettingsAccountRoute: typeof AuthenticatedSettingsAccountRoute
   AuthenticatedSettingsDataRoute: typeof AuthenticatedSettingsDataRoute
-  AuthenticatedSettingsOverviewRoute: typeof AuthenticatedSettingsOverviewRoute
   AuthenticatedSettingsIndexRoute: typeof AuthenticatedSettingsIndexRoute
 }
 
 const AuthenticatedSettingsRouteRouteChildren: AuthenticatedSettingsRouteRouteChildren =
   {
+    AuthenticatedSettingsAccountRoute: AuthenticatedSettingsAccountRoute,
     AuthenticatedSettingsDataRoute: AuthenticatedSettingsDataRoute,
-    AuthenticatedSettingsOverviewRoute: AuthenticatedSettingsOverviewRoute,
     AuthenticatedSettingsIndexRoute: AuthenticatedSettingsIndexRoute,
   }
 
@@ -390,8 +390,8 @@ export interface FileRoutesByFullPath {
   '/admin': typeof AuthenticatedAdminRouteRouteWithChildren
   '/settings': typeof AuthenticatedSettingsRouteRouteWithChildren
   '/signin': typeof UnauthenticatedSigninRoute
+  '/settings/account': typeof AuthenticatedSettingsAccountRoute
   '/settings/data': typeof AuthenticatedSettingsDataRoute
-  '/settings/overview': typeof AuthenticatedSettingsOverviewRoute
   '/': typeof AuthenticatedHomeIndexRoute
   '/admin/': typeof AuthenticatedAdminIndexRoute
   '/browse': typeof AuthenticatedBrowseIndexRoute
@@ -408,8 +408,8 @@ export interface FileRoutesByFullPath {
 export interface FileRoutesByTo {
   '': typeof UnauthenticatedRouteWithChildren
   '/signin': typeof UnauthenticatedSigninRoute
+  '/settings/account': typeof AuthenticatedSettingsAccountRoute
   '/settings/data': typeof AuthenticatedSettingsDataRoute
-  '/settings/overview': typeof AuthenticatedSettingsOverviewRoute
   '/': typeof AuthenticatedHomeIndexRoute
   '/admin': typeof AuthenticatedAdminIndexRoute
   '/browse': typeof AuthenticatedBrowseIndexRoute
@@ -431,8 +431,8 @@ export interface FileRoutesById {
   '/_authenticated/settings': typeof AuthenticatedSettingsRouteRouteWithChildren
   '/_authenticated/_home': typeof AuthenticatedHomeRouteWithChildren
   '/_unauthenticated/signin': typeof UnauthenticatedSigninRoute
+  '/_authenticated/settings/account': typeof AuthenticatedSettingsAccountRoute
   '/_authenticated/settings/data': typeof AuthenticatedSettingsDataRoute
-  '/_authenticated/settings/overview': typeof AuthenticatedSettingsOverviewRoute
   '/_authenticated/_home/': typeof AuthenticatedHomeIndexRoute
   '/_authenticated/admin/': typeof AuthenticatedAdminIndexRoute
   '/_authenticated/browse/': typeof AuthenticatedBrowseIndexRoute
@@ -453,8 +453,8 @@ export interface FileRouteTypes {
     | '/admin'
     | '/settings'
     | '/signin'
+    | '/settings/account'
     | '/settings/data'
-    | '/settings/overview'
     | '/'
     | '/admin/'
     | '/browse'
@@ -470,8 +470,8 @@ export interface FileRouteTypes {
   to:
     | ''
     | '/signin'
+    | '/settings/account'
     | '/settings/data'
-    | '/settings/overview'
     | '/'
     | '/admin'
     | '/browse'
@@ -491,8 +491,8 @@ export interface FileRouteTypes {
     | '/_authenticated/settings'
     | '/_authenticated/_home'
     | '/_unauthenticated/signin'
+    | '/_authenticated/settings/account'
     | '/_authenticated/settings/data'
-    | '/_authenticated/settings/overview'
     | '/_authenticated/_home/'
     | '/_authenticated/admin/'
     | '/_authenticated/browse/'
@@ -562,8 +562,8 @@ export const routeTree = rootRoute
       "filePath": "_authenticated/settings/route.tsx",
       "parent": "/_authenticated",
       "children": [
+        "/_authenticated/settings/account",
         "/_authenticated/settings/data",
-        "/_authenticated/settings/overview",
         "/_authenticated/settings/"
       ]
     },
@@ -580,12 +580,12 @@ export const routeTree = rootRoute
       "filePath": "_unauthenticated/signin.tsx",
       "parent": "/_unauthenticated"
     },
-    "/_authenticated/settings/data": {
-      "filePath": "_authenticated/settings/data.tsx",
+    "/_authenticated/settings/account": {
+      "filePath": "_authenticated/settings/account.tsx",
       "parent": "/_authenticated/settings"
     },
-    "/_authenticated/settings/overview": {
-      "filePath": "_authenticated/settings/overview.tsx",
+    "/_authenticated/settings/data": {
+      "filePath": "_authenticated/settings/data.tsx",
       "parent": "/_authenticated/settings"
     },
     "/_authenticated/_home/": {
diff --git a/src/routes/_authenticated/_home.tsx b/src/routes/_authenticated/_home.tsx
index 0c46feb..ac2a54b 100644
--- a/src/routes/_authenticated/_home.tsx
+++ b/src/routes/_authenticated/_home.tsx
@@ -1,4 +1,5 @@
 import {
+  Badge,
   Button,
   Container,
   Empty,
@@ -112,10 +113,21 @@ function IndexRoute() {
       <AppSidebar>
         <div className="flex items-center mb-4 bg-gray-app z-10">
           <ProgressBar
-            label="Quests complete"
+            label="Quest progress"
             value={completedQuests}
             maxValue={userQuestCount}
-            valueLabel={`${completedQuests} of ${userQuestCount}`}
+            valueLabel={
+              <span className="text-gray-normal">
+                <span className="text-gray-normal text-base font-medium mr-0.5 leading-none">
+                  {completedQuests}
+                </span>{" "}
+                <span className="text-gray-8 dark:text-graydark-8">/</span>{" "}
+                <span className="text-gray-dim">
+                  {userQuestCount} quests complete
+                </span>
+              </span>
+            }
+            labelHidden
             className="mr-4"
           />
           <TooltipTrigger>
@@ -170,6 +182,9 @@ function IndexRoute() {
                     >
                       <StatusBadge status={quest.status as Status} condensed />
                       {quest.title}
+                      {quest.jurisdiction && (
+                        <Badge size="xs">{quest.jurisdiction}</Badge>
+                      )}
                     </NavItem>
                   ))}
                 </NavGroup>
@@ -183,7 +198,7 @@ function IndexRoute() {
   return (
     <>
       <Authenticated>
-        <Container className="flex gap-6">
+        <Container className="flex">
           <MyQuests />
           <Outlet />
         </Container>
diff --git a/src/routes/_authenticated/_home/quests.$questId.tsx b/src/routes/_authenticated/_home/quests.$questId.tsx
index d8521f8..8fc48a8 100644
--- a/src/routes/_authenticated/_home/quests.$questId.tsx
+++ b/src/routes/_authenticated/_home/quests.$questId.tsx
@@ -1,4 +1,5 @@
 import {
+  AppContent,
   Badge,
   Button,
   DialogTrigger,
@@ -159,7 +160,7 @@ function QuestDetailRoute() {
     return <Empty title="Quest not found" icon={Milestone} />;
 
   return (
-    <div className="w-full">
+    <AppContent>
       <PageHeader
         title={quest.title}
         badge={quest.jurisdiction && <Badge>{quest.jurisdiction}</Badge>}
@@ -185,18 +186,18 @@ function QuestDetailRoute() {
           </Menu>
         </MenuTrigger>
       </PageHeader>
-      <div className="flex gap-4 mb-4">
+      <div className="flex gap-4 mb-4 lg:mb-6 xl:mb-8">
         <QuestCosts costs={quest.costs} />
         <QuestTimeRequired timeRequired={quest.timeRequired as TimeRequired} />
       </div>
       <QuestUrls urls={quest.urls} />
       {quest.content ? (
-        <Markdown className="prose dark:prose-invert max-w-full">
+        <Markdown className="prose lg:prose-lg dark:prose-invert max-w-full">
           {quest.content}
         </Markdown>
       ) : (
         "No content"
       )}
-    </div>
+    </AppContent>
   );
 }
diff --git a/src/routes/_authenticated/admin/route.tsx b/src/routes/_authenticated/admin/route.tsx
index a6f6e84..1724c58 100644
--- a/src/routes/_authenticated/admin/route.tsx
+++ b/src/routes/_authenticated/admin/route.tsx
@@ -1,4 +1,11 @@
-import { AppSidebar, Container, Nav, NavItem } from "@/components";
+import {
+  AppContent,
+  AppSidebar,
+  Container,
+  Nav,
+  NavGroup,
+  NavItem,
+} from "@/components";
 import { Outlet, createFileRoute, redirect } from "@tanstack/react-router";
 import { FileText, Milestone, RectangleEllipsis } from "lucide-react";
 
@@ -19,23 +26,25 @@ export const Route = createFileRoute("/_authenticated/admin")({
 
 function AdminRoute() {
   return (
-    <Container className="flex gap-6">
+    <Container className="flex">
       <AppSidebar>
         <Nav>
-          <NavItem icon={Milestone} href={{ to: "/admin/quests" }}>
-            Quests
-          </NavItem>
-          <NavItem icon={FileText} href={{ to: "/admin/forms" }}>
-            Forms
-          </NavItem>
-          <NavItem icon={RectangleEllipsis} href={{ to: "/admin/fields" }}>
-            Fields
-          </NavItem>
+          <NavGroup label="Content">
+            <NavItem icon={Milestone} href={{ to: "/admin/quests" }}>
+              Quests
+            </NavItem>
+            <NavItem icon={FileText} href={{ to: "/admin/forms" }}>
+              Forms
+            </NavItem>
+            <NavItem icon={RectangleEllipsis} href={{ to: "/admin/fields" }}>
+              Fields
+            </NavItem>
+          </NavGroup>
         </Nav>
       </AppSidebar>
-      <div className="w-full">
+      <AppContent>
         <Outlet />
-      </div>
+      </AppContent>
     </Container>
   );
 }
diff --git a/src/routes/_authenticated/browse/index.tsx b/src/routes/_authenticated/browse/index.tsx
index e1955aa..6cf1e51 100644
--- a/src/routes/_authenticated/browse/index.tsx
+++ b/src/routes/_authenticated/browse/index.tsx
@@ -1,4 +1,5 @@
 import {
+  AppContent,
   AppSidebar,
   Badge,
   Button,
@@ -169,7 +170,7 @@ function IndexRoute() {
   );
 
   return (
-    <Container className="flex gap-6">
+    <Container className="flex">
       <AppSidebar>
         <SearchField
           value={search}
@@ -178,14 +179,14 @@ function IndexRoute() {
           aria-label="Search quests"
         />
       </AppSidebar>
-      <div className="w-full">
+      <AppContent>
         <PageHeader title="Browse quests" />
         {filteredQuests && search !== "" ? (
           <SearchResultsGrid quests={filteredQuests} />
         ) : (
           <QuestCategoryGrid />
         )}
-      </div>
+      </AppContent>
     </Container>
   );
 }
diff --git a/src/routes/_authenticated/settings/overview.tsx b/src/routes/_authenticated/settings/account.tsx
similarity index 96%
rename from src/routes/_authenticated/settings/overview.tsx
rename to src/routes/_authenticated/settings/account.tsx
index ed18567..958f6ea 100644
--- a/src/routes/_authenticated/settings/overview.tsx
+++ b/src/routes/_authenticated/settings/account.tsx
@@ -18,11 +18,11 @@ import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
-export const Route = createFileRoute("/_authenticated/settings/overview")({
-  component: SettingsOverviewRoute,
+export const Route = createFileRoute("/_authenticated/settings/account")({
+  component: SettingsAccountRoute,
 });
 
-function SettingsOverviewRoute() {
+function SettingsAccountRoute() {
   const { signOut } = useAuthActions();
   const { setTheme } = useTheme();
   const user = useQuery(api.users.getCurrentUser);
@@ -91,7 +91,7 @@ function SettingsOverviewRoute() {
 
   return (
     <>
-      <PageHeader title="Settings" />
+      <PageHeader title="Account" />
       {user === undefined ? (
         "Loading..."
       ) : user === null ? (
diff --git a/src/routes/_authenticated/settings/index.tsx b/src/routes/_authenticated/settings/index.tsx
index 3988524..9780839 100644
--- a/src/routes/_authenticated/settings/index.tsx
+++ b/src/routes/_authenticated/settings/index.tsx
@@ -2,6 +2,6 @@ import { createFileRoute, redirect } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/_authenticated/settings/")({
   beforeLoad: () => {
-    throw redirect({ to: "/settings/overview" });
+    throw redirect({ to: "/settings/account" });
   },
 });
diff --git a/src/routes/_authenticated/settings/route.tsx b/src/routes/_authenticated/settings/route.tsx
index 9807bdb..a065b05 100644
--- a/src/routes/_authenticated/settings/route.tsx
+++ b/src/routes/_authenticated/settings/route.tsx
@@ -1,4 +1,11 @@
-import { AppSidebar, Container, Nav, NavItem } from "@/components";
+import {
+  AppContent,
+  AppSidebar,
+  Container,
+  Nav,
+  NavGroup,
+  NavItem,
+} from "@/components";
 import { Outlet, createFileRoute } from "@tanstack/react-router";
 import { CircleUser, Database } from "lucide-react";
 
@@ -8,20 +15,22 @@ export const Route = createFileRoute("/_authenticated/settings")({
 
 function SettingsRoute() {
   return (
-    <Container className="flex gap-6">
+    <Container className="flex">
       <AppSidebar>
         <Nav>
-          <NavItem icon={CircleUser} href={{ to: "/settings/overview" }}>
-            Overview
-          </NavItem>
-          <NavItem icon={Database} href={{ to: "/settings/data" }}>
-            Data
-          </NavItem>
+          <NavGroup label="Settings">
+            <NavItem icon={CircleUser} href={{ to: "/settings/account" }}>
+              Account
+            </NavItem>
+            <NavItem icon={Database} href={{ to: "/settings/data" }}>
+              Data
+            </NavItem>
+          </NavGroup>
         </Nav>
       </AppSidebar>
-      <div className="w-full">
+      <AppContent>
         <Outlet />
-      </div>
+      </AppContent>
     </Container>
   );
 }
diff --git a/src/styles/index.css b/src/styles/index.css
index dda8a9f..c330f39 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -2,6 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  .app-padding {
+    @apply px-6 lg:px-8;
+  }
+
+  .h-header {
+    @apply h-16 lg:h-20;
+  }
+}
+
 /* Scale up hit targets on high resolution mobile devices. */
 @media (min-resolution: 200dpi) {
   html {