From db8dc5190795fdefdfcd5e99ff8156a8fd8d21ba Mon Sep 17 00:00:00 2001
From: Alaqmar Gandhi <alaqmargandhi@gmail.com>
Date: Mon, 14 Sep 2026 20:59:43 -0400
Subject: [PATCH 1/2] Fix mobile-width breakage site-wide and add a persistent,
 denser admin nav

---
 app/(public)/page.tsx                         |   4 +-
 .../team/components/team-member-card.tsx      |  18 ++-
 app/(public)/team/pageClient.tsx              |   8 +-
 app/admin/analytics/page.tsx                  |   2 +-
 app/admin/documents/[id]/page.tsx             |   2 +-
 app/admin/documents/templates/page.tsx        |   4 +-
 app/admin/events/page.tsx                     |   2 +-
 app/admin/layout.tsx                          |  58 ++++----
 app/admin/mail/aliases/page.tsx               |   2 +-
 app/admin/mail/mailbox-list.tsx               |   4 +-
 app/admin/mail/page.tsx                       |  12 +-
 app/admin/mail/setup/page.tsx                 |   2 +-
 app/admin/nav.tsx                             | 130 ++++++++++++++++++
 app/admin/page.tsx                            |  22 ++-
 app/admin/palette.tsx                         |  24 ++--
 app/admin/profile/page.tsx                    |   4 +-
 app/admin/sections.ts                         |  21 ++-
 app/admin/users/page.tsx                      |   2 +-
 app/admin/users/ui.tsx                        |   6 +-
 components/documents/document-thumbnail.tsx   |   6 +-
 20 files changed, 243 insertions(+), 90 deletions(-)
 create mode 100644 app/admin/nav.tsx

diff --git a/app/(public)/page.tsx b/app/(public)/page.tsx
index b270b785..86a1bf23 100644
--- a/app/(public)/page.tsx
+++ b/app/(public)/page.tsx
@@ -12,7 +12,7 @@ export default function Home() {
   return (
     <main className="flex flex-col w-full font-sans bg-surface overflow-x-clip">
       <section className="relative w-full border-b-2 border-line">
-        <div className="animate-rise-in max-w-7xl mx-auto px-1 py-14 sm:px-8 sm:py-24 md:py-32 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
+        <div className="animate-rise-in max-w-7xl mx-auto px-4 py-14 sm:px-8 sm:py-24 md:py-32 grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
           <div className="flex flex-col items-start gap-6 z-10">
             <Badge
               variant="outline"
@@ -57,7 +57,7 @@ export default function Home() {
             />
             <MemberBadge
               count="900+"
-              className="absolute -bottom-6 -right-2 md:-right-8 z-20"
+              className="absolute -bottom-4 -right-1 sm:-bottom-6 sm:-right-2 md:-right-8 z-20"
             />
           </div>
         </div>
diff --git a/app/(public)/team/components/team-member-card.tsx b/app/(public)/team/components/team-member-card.tsx
index 5563c6d2..33c24858 100644
--- a/app/(public)/team/components/team-member-card.tsx
+++ b/app/(public)/team/components/team-member-card.tsx
@@ -77,7 +77,7 @@ export function TeamMemberCard({
   const titleLabel = isAlumni ? (
     <p className="max-w-full text-sm font-semibold text-brand">{title}</p>
   ) : (
-    <Badge className="max-w-full overflow-hidden" size="sm" variant="default">
+    <Badge className="max-w-full truncate" size="sm" variant="default">
       {title}
     </Badge>
   );
@@ -104,7 +104,11 @@ export function TeamMemberCard({
             alt={name}
             className="object-cover"
             fill
-            sizes="(max-width: 640px) 100vw, (max-width: 1060px) 50vw, 25vw"
+            sizes={
+              isAlumni
+                ? "(max-width: 767px) 50vw, (max-width: 1279px) 33vw, 20vw"
+                : "(max-width: 767px) 50vw, (max-width: 1279px) 33vw, 25vw"
+            }
             src={imageUrl}
             style={{ objectPosition: member.image?.position ?? "50% 50%" }}
             unoptimized
@@ -150,13 +154,13 @@ export function TeamMemberCard({
         )}
       </div>
 
-      <div className={isAlumni ? "space-y-1 p-3" : "space-y-3 p-4"}>
+      <div className={isAlumni ? "space-y-1 p-2.5" : "space-y-2 p-3"}>
         <div className="space-y-1.5">
           <h3
             className={
               isAlumni
-                ? "text-lg font-semibold leading-tight text-ink/85"
-                : "text-xl font-semibold leading-tight text-ink"
+                ? "text-sm font-semibold leading-tight text-ink/85"
+                : "text-base font-semibold leading-tight text-ink"
             }
           >
             {name}
@@ -179,7 +183,7 @@ export function TeamMemberCard({
                     <Image
                       alt=""
                       aria-hidden="true"
-                      className="size-[18px] dark:brightness-[1.4]"
+                      className="size-4 dark:brightness-[1.4]"
                       height={18}
                       src={SOCIAL_ICON_SRC[social.platform]}
                       width={18}
@@ -191,7 +195,7 @@ export function TeamMemberCard({
                   <button
                     aria-controls={bioPanelId}
                     aria-expanded={isBioOpen}
-                    className={`inline-flex h-9 items-center rounded-full px-2.5 text-[0.65rem] font-bold uppercase tracking-wider ${
+                    className={`inline-flex h-9 items-center rounded-full px-2 text-[0.65rem] font-bold uppercase tracking-wider ${
                       isBioOpen
                         ? "bg-brand text-brand-ink"
                         : "text-brand hover:bg-tint"
diff --git a/app/(public)/team/pageClient.tsx b/app/(public)/team/pageClient.tsx
index 651c99e9..0555d5e4 100644
--- a/app/(public)/team/pageClient.tsx
+++ b/app/(public)/team/pageClient.tsx
@@ -209,7 +209,7 @@ export default function TeamPageClient() {
             <div
               aria-busy="true"
               aria-label="Loading current team"
-              className="mb-4 grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4"
+              className="mb-4 grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-4"
               role="status"
             >
               {[0, 1, 2, 3].map((index) => (
@@ -218,7 +218,7 @@ export default function TeamPageClient() {
                   key={index}
                 >
                   <div className="aspect-[4/3] bg-line/10" />
-                  <div className="h-[5.5rem]" />
+                  <div className="h-[7.5rem]" />
                 </div>
               ))}
             </div>
@@ -228,7 +228,7 @@ export default function TeamPageClient() {
           )}
 
           {hasCurrentExecs && (
-            <div className="animate-fade-in grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">
+            <div className="animate-fade-in grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-4">
               {visibleCurrentExecs.map((member) => (
                 <TeamMemberCard key={member.$key} member={member} />
               ))}
@@ -260,7 +260,7 @@ export default function TeamPageClient() {
                   <h3 className="mb-2 text-base font-semibold text-ink/80">
                     {group.term}
                   </h3>
-                  <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-5">
+                  <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-5">
                     {group.members.map((member) => (
                       <TeamMemberCard
                         isAlumni
diff --git a/app/admin/analytics/page.tsx b/app/admin/analytics/page.tsx
index af908803..7d156666 100644
--- a/app/admin/analytics/page.tsx
+++ b/app/admin/analytics/page.tsx
@@ -46,7 +46,7 @@ const Stat = ({
 }) => {
   const tile = (
     <div
-      className={`relative h-full animate-rise-in rounded-[20px] border-2 border-line p-4 shadow-brut-sm transition duration-[var(--dur)] ease-smooth ${
+      className={`relative h-full animate-rise-in rounded-[16px] border-2 border-line p-3.5 shadow-brut-sm transition duration-[var(--dur)] ease-smooth ${
         href
           ? "group-hover:-translate-y-0.5 group-hover:bg-tint group-hover:shadow-[3px_5px_0_0_var(--shade)] motion-reduce:group-hover:translate-y-0"
           : "hover:shadow-[3px_3px_0_0_var(--brand)]"
diff --git a/app/admin/documents/[id]/page.tsx b/app/admin/documents/[id]/page.tsx
index 93b0c968..1fb4f5b3 100644
--- a/app/admin/documents/[id]/page.tsx
+++ b/app/admin/documents/[id]/page.tsx
@@ -672,7 +672,7 @@ export default function DocumentDetailPage() {
             <ul className="flex flex-col gap-2">
               {signers.map((signer, index) => (
                 <li
-                  className="flex flex-wrap items-center gap-2 sm:flex-nowrap"
+                  className="flex flex-wrap items-center gap-2 md:flex-nowrap"
                   key={signer.localId}
                 >
                   <SignerSwatch color={signerColor(index)} />
diff --git a/app/admin/documents/templates/page.tsx b/app/admin/documents/templates/page.tsx
index 5554dce7..5ad6a3b0 100644
--- a/app/admin/documents/templates/page.tsx
+++ b/app/admin/documents/templates/page.tsx
@@ -44,14 +44,14 @@ export default function TemplatesPage() {
       <div className="grid gap-4 sm:grid-cols-2">
         {DOCUMENT_TEMPLATES.map((template) => (
           <div
-            className="animate-fade-in rounded-[20px] border-2 border-line bg-surface p-5 shadow-brut transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[6px_6px_0_0_var(--brand)]"
+            className="animate-fade-in rounded-[16px] border-2 border-line bg-surface p-4 shadow-brut transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[6px_6px_0_0_var(--brand)]"
             key={template.id}
           >
             <h2 className="text-base font-extrabold text-ink">
               {template.name}
             </h2>
             <p className="mt-1 text-sm text-subtle">{template.blurb}</p>
-            <div className="mt-4 flex flex-wrap gap-2">
+            <div className="mt-3 flex flex-wrap gap-2">
               <Button asChild size="sm" variant="primary">
                 <a href={templateFileUrl(template.id, "docx")}>
                   <Download aria-hidden />
diff --git a/app/admin/events/page.tsx b/app/admin/events/page.tsx
index 0fbab362..ef11cecb 100644
--- a/app/admin/events/page.tsx
+++ b/app/admin/events/page.tsx
@@ -46,7 +46,7 @@ function EventRow({
   const recurrence = getRecurrenceLabel(event);
 
   return (
-    <li className="flex flex-wrap items-start gap-4 rounded-[20px] border-2 border-line bg-surface p-4 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)] sm:p-5">
+    <li className="flex flex-wrap items-start gap-4 rounded-[16px] border-2 border-line bg-surface p-3 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)] sm:p-4">
       <div className="relative size-16 shrink-0 overflow-hidden rounded-[10px] border-2 border-line bg-tint">
         {event.image?.url ? (
           <Image
diff --git a/app/admin/layout.tsx b/app/admin/layout.tsx
index cbfcb459..a7cf4000 100644
--- a/app/admin/layout.tsx
+++ b/app/admin/layout.tsx
@@ -5,19 +5,21 @@ import { useRouter, usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { ArrowUpRight } from "lucide-react";
+import { ArrowUpRight, LogOut } from "lucide-react";
 import { LoginForm } from "@/components/admin/login-form";
 import { ThemeToggle } from "@/components/theme-toggle";
 import { SessionProvider, useSession } from "./session";
 import { PaletteProvider, SearchButton } from "./palette";
 import { AskHost } from "./ask";
-import { sectionFor } from "./sections";
+import { AdminRail, AdminTabBar } from "./nav";
+import { sectionFor, visibleSections } from "./sections";
 
 function AdminShell({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const pathname = usePathname();
   const { user, loading, refresh } = useSession();
   const [mailAddress, setMailAddress] = useState<string | null>(null);
+  const [hasMailbox, setHasMailbox] = useState<boolean | null>(null);
 
   useEffect(() => {
     if (!user?.isExecutive) return;
@@ -39,7 +41,10 @@ function AdminShell({ children }: { children: React.ReactNode }) {
     fetch("/api/mail/me")
       .then((res) => (res.ok ? res.json() : null))
       .then((data: { email: string | null } | null) => {
-        if (data) setMailAddress(data.email);
+        if (data) {
+          setMailAddress(data.email);
+          setHasMailbox(Boolean(data.email));
+        }
       })
       .catch(() => {});
   }, [user?.isExecutive]);
@@ -91,9 +96,10 @@ function AdminShell({ children }: { children: React.ReactNode }) {
 
   const section = sectionFor(pathname);
   const onMenu = pathname === "/admin";
+  const sections = visibleSections(user, hasMailbox);
 
   return (
-    <PaletteProvider hasMail={Boolean(mailAddress)} onLogout={handleLogout}>
+    <PaletteProvider hasMail={hasMailbox} onLogout={handleLogout}>
       <div className="flex min-h-screen flex-col">
         <header className="flex items-center gap-3 border-b-2 border-line px-4 py-2.5 sm:px-6">
           {onMenu ? (
@@ -108,23 +114,11 @@ function AdminShell({ children }: { children: React.ReactNode }) {
               <span className="font-extrabold text-ink">Admin</span>
             </span>
           ) : (
-            <Link
-              href="/admin"
-              className="group flex items-center gap-2 rounded-[10px] border-2 border-line px-3 py-1.5 text-sm font-bold text-ink hover:bg-tint"
-            >
-              <span
-                aria-hidden
-                className="transition-[translate] duration-[var(--dur)] ease-smooth group-hover:-translate-x-0.5 motion-reduce:group-hover:translate-x-0"
-              >
-                ←
-              </span>{" "}
-              Menu
-            </Link>
-          )}
-          {section && (
-            <span className="truncate font-extrabold text-ink">
-              {section.name}
-            </span>
+            section && (
+              <span className="min-w-0 flex-1 truncate font-extrabold text-ink">
+                {section.name}
+              </span>
+            )
           )}
 
           <div className="ml-auto flex items-center gap-2 sm:gap-3">
@@ -148,17 +142,29 @@ function AdminShell({ children }: { children: React.ReactNode }) {
             </Link>
             <button
               onClick={handleLogout}
-              className="rounded-[10px] border-2 border-line px-3 py-1.5 text-sm font-bold text-ink hover:bg-tint"
+              aria-label="Log out"
+              title="Log out"
+              className="inline-flex h-9 items-center gap-1 rounded-[10px] border-2 border-line px-2 text-sm font-bold text-ink hover:bg-tint sm:px-3"
             >
-              Log out
+              <LogOut className="size-4" aria-hidden />
+              <span className="hidden sm:inline">Log out</span>
             </button>
           </div>
         </header>
 
+        <div className="flex min-h-0 flex-1">
+          <aside className="hidden md:flex md:w-14 md:flex-col md:border-r-2 md:border-line lg:w-52">
+            <AdminRail sections={sections} pathname={pathname} />
+          </aside>
+          <main
+            className="min-h-0 flex-1 animate-fade-in overflow-y-auto pb-16 md:pb-0"
+            key={pathname}
+          >
+            {children}
+          </main>
+        </div>
+        <AdminTabBar sections={sections} pathname={pathname} />
         <AskHost />
-        <main className="min-h-0 flex-1 animate-fade-in" key={pathname}>
-          {children}
-        </main>
       </div>
     </PaletteProvider>
   );
diff --git a/app/admin/mail/aliases/page.tsx b/app/admin/mail/aliases/page.tsx
index e79cda9e..f6d8d4b6 100644
--- a/app/admin/mail/aliases/page.tsx
+++ b/app/admin/mail/aliases/page.tsx
@@ -30,7 +30,7 @@ const Tile = ({
   detail: string;
   children?: React.ReactNode;
 }) => (
-  <div className="animate-rise-in rounded-[20px] border-2 border-line bg-surface p-4 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)]">
+  <div className="animate-rise-in rounded-[16px] border-2 border-line bg-surface p-3.5 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[3px_3px_0_0_var(--brand)]">
     <div className="text-xs font-bold uppercase tracking-wide text-subtle">
       {label}
     </div>
diff --git a/app/admin/mail/mailbox-list.tsx b/app/admin/mail/mailbox-list.tsx
index 7c169d3b..70674b86 100644
--- a/app/admin/mail/mailbox-list.tsx
+++ b/app/admin/mail/mailbox-list.tsx
@@ -12,7 +12,7 @@ export function MailboxList({
   onSelect: (id: string) => void;
 }) {
   return (
-    <nav className="flex gap-2 overflow-x-auto pb-1 md:min-h-0 md:flex-col md:overflow-x-visible md:overflow-y-auto md:pb-0">
+    <nav className="flex gap-2 overflow-x-auto pb-1 lg:min-h-0 lg:flex-col lg:overflow-x-visible lg:overflow-y-auto lg:pb-0">
       {mailboxes.map((box) => {
         const active = box.id === selected;
         return (
@@ -20,7 +20,7 @@ export function MailboxList({
             key={box.id}
             type="button"
             onClick={() => onSelect(box.id)}
-            className={`flex shrink-0 items-center justify-between gap-3 rounded-[10px] border-2 border-line px-3 py-2 text-left text-sm font-bold md:shrink ${
+            className={`flex shrink-0 items-center justify-between gap-3 rounded-[10px] border-2 border-line px-3 py-2 text-left text-sm font-bold lg:shrink ${
               active
                 ? "bg-brand text-brand-ink shadow-brut-sm"
                 : "bg-surface text-ink hover:bg-tint"
diff --git a/app/admin/mail/page.tsx b/app/admin/mail/page.tsx
index e4d82edc..aef93c40 100644
--- a/app/admin/mail/page.tsx
+++ b/app/admin/mail/page.tsx
@@ -517,9 +517,9 @@ function MailPage({
     : null;
 
   return (
-    <div className="flex h-[calc(100dvh-3.625rem)] animate-fade-in gap-3 p-3 md:gap-4 md:p-4">
+    <div className="flex h-[calc(100dvh-3.625rem-3.5rem)] animate-fade-in flex-col gap-3 p-3 md:h-[calc(100dvh-3.625rem)] md:gap-4 md:p-4 lg:flex-row">
       <aside
-        className={`min-h-0 shrink-0 flex-col gap-3 md:flex md:w-52 ${open ? "hidden" : "flex"}`}
+        className={`min-h-0 w-full shrink-0 flex-col gap-3 lg:flex lg:w-52 lg:shrink-0 ${open ? "hidden" : "flex"}`}
       >
         {user?.isMailAdmin && (
           <InboxPicker
@@ -590,7 +590,7 @@ function MailPage({
 
         <div className="flex min-h-0 flex-1">
           <div
-            className={`min-h-0 w-full flex-col md:flex md:w-80 md:shrink-0 md:border-r-2 md:border-line ${open ? "hidden" : "flex"}`}
+            className={`min-h-0 w-full flex-col lg:flex lg:w-80 lg:shrink-0 lg:border-r-2 lg:border-line ${open ? "hidden" : "flex"}`}
           >
             <header className="shrink-0 space-y-2 border-b-2 border-line px-4 py-2.5">
               <div className="flex items-baseline justify-between gap-2">
@@ -649,7 +649,7 @@ function MailPage({
           </div>
 
           <div
-            className={`min-h-0 min-w-0 flex-1 flex-col ${open ? "flex" : "hidden md:flex"}`}
+            className={`min-h-0 min-w-0 flex-1 flex-col ${open ? "flex" : "hidden lg:flex"}`}
           >
             {message ? (
               <>
@@ -776,13 +776,13 @@ function MessageActions({
 
   return (
     <div
-      className={`flex flex-wrap items-center gap-1.5 border-b-2 border-line px-3 py-2.5 md:px-5 ${viewing ? "md:hidden" : ""}`}
+      className={`flex flex-wrap items-center gap-1.5 border-b-2 border-line px-3 py-2.5 lg:px-5 ${viewing ? "lg:hidden" : ""}`}
     >
       <button
         type="button"
         onClick={onBack}
         aria-label="Back to the list"
-        className={`${ACTION} md:hidden`}
+        className={`${ACTION} lg:hidden`}
       >
         <ArrowLeft size={15} aria-hidden />
       </button>
diff --git a/app/admin/mail/setup/page.tsx b/app/admin/mail/setup/page.tsx
index c5ca93b6..2298913e 100644
--- a/app/admin/mail/setup/page.tsx
+++ b/app/admin/mail/setup/page.tsx
@@ -17,7 +17,7 @@ const Step = ({
   title: string;
   children: React.ReactNode;
 }) => (
-  <div className="animate-fade-in rounded-[20px] border-2 border-line bg-surface p-5 shadow-brut transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[6px_6px_0_0_var(--brand)]">
+  <div className="animate-fade-in rounded-[16px] border-2 border-line bg-surface p-4 shadow-brut-sm transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[6px_6px_0_0_var(--brand)]">
     <Icon aria-hidden className="size-5 text-brand" />
     <h2 className="mt-2 text-sm font-extrabold uppercase tracking-wide text-ink">
       {title}
diff --git a/app/admin/nav.tsx b/app/admin/nav.tsx
new file mode 100644
index 00000000..05df7e99
--- /dev/null
+++ b/app/admin/nav.tsx
@@ -0,0 +1,130 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { MoreHorizontal } from "lucide-react";
+import { SECTION_ICONS } from "./icons";
+import { usePalette } from "./palette";
+import { sectionFor, type Section } from "./sections";
+
+/** Persistent md+ nav: icon-only until lg, full icon+label at lg+. */
+export function AdminRail({
+  sections,
+  pathname,
+}: {
+  sections: Section[];
+  pathname: string;
+}) {
+  const current = sectionFor(pathname);
+  const atHome = pathname === "/admin";
+
+  return (
+    <nav
+      aria-label="Admin sections"
+      className="flex flex-1 flex-col gap-1 overflow-y-auto p-3"
+    >
+      <Link
+        href="/admin"
+        title="Dashboard"
+        aria-current={atHome ? "page" : undefined}
+        className={`mb-2 flex items-center justify-center gap-3 rounded-[10px] border-b-2 border-line px-3 py-2.5 pb-3.5 lg:justify-start ${
+          atHome ? "text-brand" : "text-ink"
+        }`}
+      >
+        <Image
+          src="/badger-256.png"
+          alt=""
+          width={128}
+          height={128}
+          className="size-6 shrink-0 rounded-[6px]"
+          aria-hidden
+        />
+        <span className="hidden truncate font-extrabold lg:inline">
+          Dashboard
+        </span>
+      </Link>
+      {sections.map((section) => {
+        const Icon = SECTION_ICONS[section.href];
+        const active = section.href === current?.href;
+        return (
+          <Link
+            key={section.href}
+            href={section.href}
+            title={section.name}
+            aria-current={active ? "page" : undefined}
+            className={`flex min-h-9 items-center justify-center gap-3 rounded-[10px] px-3 py-2 text-sm font-bold transition-colors duration-[var(--dur)] ease-smooth lg:justify-start ${
+              active ? "bg-brand text-brand-ink" : "text-ink hover:bg-tint"
+            }`}
+          >
+            {Icon && <Icon className="size-4 shrink-0" />}
+            <span className="hidden truncate lg:inline">{section.name}</span>
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
+
+/** Fixed bottom nav below md: home, two pinned sections, and the palette for everything else. */
+export function AdminTabBar({
+  sections,
+  pathname,
+}: {
+  sections: Section[];
+  pathname: string;
+}) {
+  const { open } = usePalette();
+  const pinned = sections.slice(0, 2);
+  const current = sectionFor(pathname);
+  const atHome = pathname === "/admin";
+
+  return (
+    <nav
+      aria-label="Admin sections"
+      className="fixed inset-x-0 bottom-0 z-40 flex items-stretch justify-around border-t-2 border-line bg-surface pb-[env(safe-area-inset-bottom)] md:hidden"
+    >
+      <Link
+        href="/admin"
+        aria-current={atHome ? "page" : undefined}
+        className={`flex flex-1 flex-col items-center justify-center gap-0.5 py-2 text-[11px] font-bold ${
+          atHome ? "text-brand" : "text-subtle"
+        }`}
+      >
+        <Image
+          src="/badger-256.png"
+          alt=""
+          width={128}
+          height={128}
+          className="size-5"
+          aria-hidden
+        />
+        Home
+      </Link>
+      {pinned.map((section) => {
+        const Icon = SECTION_ICONS[section.href];
+        const active = section.href === current?.href;
+        return (
+          <Link
+            key={section.href}
+            href={section.href}
+            aria-current={active ? "page" : undefined}
+            className={`flex flex-1 flex-col items-center justify-center gap-0.5 py-2 text-[11px] font-bold ${
+              active ? "text-brand" : "text-subtle"
+            }`}
+          >
+            {Icon && <Icon className="size-5" />}
+            {section.name}
+          </Link>
+        );
+      })}
+      <button
+        type="button"
+        onClick={open}
+        className="flex flex-1 flex-col items-center justify-center gap-0.5 py-2 text-[11px] font-bold text-subtle"
+      >
+        <MoreHorizontal className="size-5" aria-hidden />
+        More
+      </button>
+    </nav>
+  );
+}
diff --git a/app/admin/page.tsx b/app/admin/page.tsx
index ad46a452..c1316a55 100644
--- a/app/admin/page.tsx
+++ b/app/admin/page.tsx
@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useSession } from "./session";
-import { SECTIONS } from "./sections";
+import { visibleSections } from "./sections";
 import { SECTION_ICONS } from "./icons";
 
 export default function AdminMenu() {
@@ -20,22 +20,16 @@ export default function AdminMenu() {
       .catch(() => {});
   }, [user?.isExecutive]);
 
-  const open = SECTIONS.filter(
-    (section) =>
-      (!section.approverOnly || user?.isApprover) &&
-      (!section.execOnly || user?.isExecutive) &&
-      (!section.mailAdminOnly || user?.isMailAdmin) &&
-      (!section.mailboxOnly || hasMailbox !== false),
-  );
+  const open = visibleSections(user, hasMailbox);
 
   return (
-    <div className="mx-auto w-full max-w-[1060px] px-5 py-12">
+    <div className="mx-auto w-full max-w-[1060px] px-5 py-8">
       <h1 className="text-3xl font-extrabold text-ink">
         Welcome{user?.name ? `, ${user.name.split(" ")[0]}` : ""}.
       </h1>
       <p className="mt-2 text-subtle">Pick what you want to work on.</p>
 
-      <div className="mt-9 grid gap-5 sm:grid-cols-2">
+      <div className="mt-9 grid grid-cols-2 gap-3 md:grid-cols-3">
         {open.map((section, index) => {
           const Icon = SECTION_ICONS[section.href];
           return (
@@ -43,15 +37,15 @@ export default function AdminMenu() {
               key={section.href}
               href={section.href}
               style={{ animationDelay: `${index * 20}ms` }}
-              className="group flex animate-rise-in items-start gap-4 rounded-[20px] border-2 border-line bg-surface p-6 shadow-brut hover:-translate-y-0.5 hover:bg-tint hover:shadow-[6px_8px_0_0_var(--shade)] motion-reduce:hover:translate-y-0"
+              className="group flex animate-rise-in items-start gap-4 rounded-[16px] border-2 border-line bg-surface p-4 shadow-brut hover:-translate-y-0.5 hover:bg-tint hover:shadow-[6px_8px_0_0_var(--shade)] motion-reduce:hover:translate-y-0"
             >
               {Icon && (
-                <span className="grid size-11 shrink-0 place-items-center rounded-[12px] border-2 border-line bg-tint text-brand transition duration-[var(--dur)] ease-smooth group-hover:-rotate-6 group-hover:bg-brand group-hover:text-brand-ink motion-reduce:group-hover:rotate-0">
-                  <Icon className="size-6" />
+                <span className="grid size-9 shrink-0 place-items-center rounded-[12px] border-2 border-line bg-tint text-brand transition duration-[var(--dur)] ease-smooth group-hover:-rotate-6 group-hover:bg-brand group-hover:text-brand-ink motion-reduce:group-hover:rotate-0">
+                  <Icon className="size-5" />
                 </span>
               )}
               <span className="min-w-0">
-                <span className="block text-xl font-extrabold text-brand">
+                <span className="block text-base font-extrabold text-brand">
                   {section.name}
                 </span>
                 <span className="mt-1.5 block text-sm text-subtle">
diff --git a/app/admin/palette.tsx b/app/admin/palette.tsx
index fb660a71..92054fe0 100644
--- a/app/admin/palette.tsx
+++ b/app/admin/palette.tsx
@@ -16,7 +16,7 @@ import type { Mailbox, MessageSummary } from "@/lib/mail/jmap-mail";
 import type { Inbox } from "@/app/api/mail/inboxes/route";
 import { fetchInboxes, matchesInbox, withAs } from "./mail/inbox-picker";
 import { sender, when } from "./mail/message-list";
-import { SECTIONS, type Section } from "./sections";
+import { visibleSections, type Section } from "./sections";
 import { useSession } from "./session";
 import { flipTheme } from "@/components/theme-toggle";
 import {
@@ -152,7 +152,7 @@ export function PaletteProvider({
   onLogout,
   children,
 }: {
-  hasMail: boolean;
+  hasMail: boolean | null;
   onLogout: () => void;
   children: React.ReactNode;
 }) {
@@ -207,21 +207,21 @@ export function PaletteProvider({
   );
 
   const places = useMemo<Section[]>(
-    () => [
-      ...SECTIONS.filter(
-        (section) =>
-          (!section.approverOnly || user?.isApprover) &&
-          (!section.execOnly || user?.isExecutive) &&
-          (!section.mailboxOnly || hasMail) &&
-          (!section.mailAdminOnly || user?.isMailAdmin),
+    () =>
+      visibleSections(
+        {
+          isApprover: user?.isApprover,
+          isExecutive: user?.isExecutive,
+          isMailAdmin: user?.isMailAdmin,
+        },
+        hasMail,
       ),
-    ],
     [user?.isApprover, user?.isExecutive, user?.isMailAdmin, hasMail],
   );
 
   const actions = useMemo<Action[]>(
     () => [
-      ...(hasMail
+      ...(hasMail !== false
         ? [
             {
               id: "compose",
@@ -333,7 +333,7 @@ function Palette({
 }: {
   actions: Action[];
   data: Data | null;
-  hasMail: boolean;
+  hasMail: boolean | null;
   places: Section[];
   onClose: () => void;
   onSend: (href: string, handoff: Handoff) => void;
diff --git a/app/admin/profile/page.tsx b/app/admin/profile/page.tsx
index e822c248..93e76afb 100644
--- a/app/admin/profile/page.tsx
+++ b/app/admin/profile/page.tsx
@@ -175,10 +175,10 @@ export default function ProfilePage() {
       </p>
 
       <form
-        className="mt-9 grid animate-fade-in gap-6 lg:grid-cols-[320px_1fr] lg:items-start lg:gap-8"
+        className="mt-9 grid animate-fade-in gap-6 md:grid-cols-[240px_1fr] md:items-start md:gap-8"
         onSubmit={save}
       >
-        <div className="lg:sticky lg:top-6">
+        <div className="md:sticky md:top-6">
           <div className="mb-3 flex items-center gap-2">
             <span className="text-xs font-extrabold uppercase tracking-wide text-subtle">
               Live preview
diff --git a/app/admin/sections.ts b/app/admin/sections.ts
index ad8be90f..63c295d6 100644
--- a/app/admin/sections.ts
+++ b/app/admin/sections.ts
@@ -8,7 +8,7 @@ export type Section = {
   mailAdminOnly?: boolean;
 };
 
-export const SECTIONS: Section[] = [
+const SECTIONS: Section[] = [
   {
     name: "Email",
     href: "/admin/mail",
@@ -61,3 +61,22 @@ export const sectionFor = (pathname: string): Section | undefined =>
   SECTIONS.filter((section) => pathname.startsWith(section.href)).sort(
     (a, b) => b.href.length - a.href.length,
   )[0];
+
+export type NavUser = {
+  isApprover?: boolean;
+  isExecutive?: boolean;
+  isMailAdmin?: boolean;
+};
+
+/** Sections a given user may see, mailbox status included. Loading (`null`) reads as "yes" so nav doesn't flicker items away then back. */
+export const visibleSections = (
+  user: NavUser | null | undefined,
+  hasMailbox: boolean | null,
+): Section[] =>
+  SECTIONS.filter(
+    (section) =>
+      (!section.approverOnly || user?.isApprover) &&
+      (!section.execOnly || user?.isExecutive) &&
+      (!section.mailAdminOnly || user?.isMailAdmin) &&
+      (!section.mailboxOnly || hasMailbox !== false),
+  );
diff --git a/app/admin/users/page.tsx b/app/admin/users/page.tsx
index 53c1a054..c1c76d1e 100644
--- a/app/admin/users/page.tsx
+++ b/app/admin/users/page.tsx
@@ -299,7 +299,7 @@ export default function UsersPage() {
                 {shown.map((entry) => (
                   <li key={entry.id}>
                     <button
-                      className="w-full rounded-[10px] border-2 border-line bg-surface px-4 py-3 text-left shadow-brut-sm hover:-translate-y-0.5 hover:bg-tint hover:shadow-[3px_5px_0_0_var(--shade)] motion-reduce:hover:translate-y-0"
+                      className="w-full rounded-[10px] border-2 border-line bg-surface px-3 py-2.5 text-left hover:bg-tint"
                       onClick={() => setSelected(entry.id)}
                     >
                       <span className="flex flex-wrap items-center gap-x-3 gap-y-1">
diff --git a/app/admin/users/ui.tsx b/app/admin/users/ui.tsx
index 70251e04..e8cab8b9 100644
--- a/app/admin/users/ui.tsx
+++ b/app/admin/users/ui.tsx
@@ -62,9 +62,9 @@ export function Panel({
 }: PanelProps) {
   return (
     <section
-      className={`animate-fade-in rounded-[20px] border-2 border-line ${
+      className={`animate-fade-in rounded-[16px] border-2 border-line ${
         tone ? "bg-tint" : "bg-surface"
-      } p-5 shadow-brut transition-shadow duration-[var(--dur)] ease-smooth hover:shadow-[6px_6px_0_0_var(--brand)]`}
+      } p-4 shadow-brut-sm`}
     >
       <div className="flex flex-wrap items-start justify-between gap-3">
         <div>
@@ -85,7 +85,7 @@ export function Panel({
         </div>
         {action}
       </div>
-      <div className="mt-4">{children}</div>
+      <div className="mt-3">{children}</div>
     </section>
   );
 }
diff --git a/components/documents/document-thumbnail.tsx b/components/documents/document-thumbnail.tsx
index 868ca5e7..4f73d625 100644
--- a/components/documents/document-thumbnail.tsx
+++ b/components/documents/document-thumbnail.tsx
@@ -6,8 +6,8 @@ import type { PDFDocumentLoadingTask, RenderTask } from "pdfjs-dist";
 import { documentFileUrl } from "@/lib/api/documents";
 import { loadPdfjs } from "@/lib/documents/load-pdfjs";
 
-const BOX_WIDTH = 64;
-const BOX_HEIGHT = 84;
+const BOX_WIDTH = 40;
+const BOX_HEIGHT = 52;
 const MAX_RENDERS = 2;
 
 /** CSS size excludes the canvas's 1px border. */
@@ -169,7 +169,7 @@ function Thumbnail({ versionId }: { versionId: string | null }) {
           }`}
         >
           {rendered === null && (
-            <FileText className="size-7 text-subtle" strokeWidth={1.75} />
+            <FileText className="size-5 text-subtle" strokeWidth={1.75} />
           )}
         </span>
       )}

From 916339af442e0c32673a6cd1e2d9bb992235343f Mon Sep 17 00:00:00 2001
From: Alaqmar Gandhi <alaqmargandhi@gmail.com>
Date: Mon, 14 Sep 2026 21:05:52 -0400
Subject: [PATCH 2/2] Let the CS Guide content column shrink so it doesn't
 overflow at 1024px

---
 app/(public)/cs-guide/page.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/(public)/cs-guide/page.tsx b/app/(public)/cs-guide/page.tsx
index 946ae7b1..695e1d44 100644
--- a/app/(public)/cs-guide/page.tsx
+++ b/app/(public)/cs-guide/page.tsx
@@ -55,7 +55,8 @@ const Guide: React.FC = () => {
         <Sidebar />
 
         {/* MAIN CONTENT */}
-        <div className="animate-fade-in flex-1 max-w-full md:max-w-3xl">
+        {/* min-w-0: without it a flex child won't shrink below its content's natural width, so right at lg (1024px) — the moment the 256px sidebar joins the row — this column pushes past the viewport instead of wrapping. */}
+        <div className="animate-fade-in min-w-0 flex-1 max-w-full md:max-w-3xl">
           {/* HERO */}
           <section id="introduction" className="mb-16">
             <h1 className="text-3xl sm:text-4xl font-bold mb-6">