feat: rename the Access section to eRBACo and tidy its layout

src/components/app-header.tsx

@@ -35,7 +35,7 @@ export function AppHeader({ active, access }: { active: Section; access?: IdpAcc
     });
   // Straight to the tab they can actually read, rather than a page that would refuse them.
   const accessTab = firstAccessTab(can);
-  if (accessTab) links.push({ to: accessTab.to, label: "Access", section: "access" });
+  if (accessTab) links.push({ to: accessTab.to, label: "eRBACo", section: "access" });
   const nav = (className: string) =>
     session && links.length > 1 ? (
       <nav aria-label="Primary" className={className}>

src/routes/access/permissions/$permissionId.tsx

@@ -101,17 +101,17 @@ function PermissionDetail() {
   }
 
   return (
-    <div className="mx-auto max-w-3xl space-y-8">
+    <div className="space-y-8">
       <div>
         <Button variant="ghost" size="sm" className="-ml-2 text-muted-foreground" asChild>
           <Link to="/access/permissions">
             <ArrowLeft aria-hidden="true" />
             Permissions
           </Link>
         </Button>
-        <h1 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">
+        <h2 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">
           {permission.name}
-        </h1>
+        </h2>
         <p className="mt-3 text-sm leading-6 text-muted-foreground">
           <KeyChip>{permission.key}</KeyChip>
           {permission.managed && (

src/routes/access/permissions/index.tsx

@@ -66,10 +66,9 @@ function PermissionsIndex() {
 
   return (
     <div className="space-y-8">
-      <div className="flex flex-wrap items-end justify-between gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl">Permissions</h1>
-          <p className="mt-3 max-w-xl text-sm leading-6 text-muted-foreground">
+          <p className="max-w-xl text-sm leading-6 text-muted-foreground">
             The things an application can check for. They reach applications as the{" "}
             <code className="font-mono text-xs">polinetwork_permissions</code> claim; each
             application still enforces its own.

src/routes/access/permissions/new.tsx

@@ -40,15 +40,15 @@ function NewPermission() {
   }
 
   return (
-    <div className="mx-auto max-w-3xl space-y-8">
+    <div className="space-y-8">
       <div>
         <Button variant="ghost" size="sm" className="-ml-2 text-muted-foreground" asChild>
           <Link to="/access/permissions">
             <ArrowLeft aria-hidden="true" />
             Permissions
           </Link>
         </Button>
-        <h1 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">New permission</h1>
+        <h2 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">New permission</h2>
         <p className="mt-3 max-w-xl text-sm leading-6 text-muted-foreground">
           Applications check for the key you choose here, so pick one you can live with.
         </p>

src/routes/access/roles/$roleId.tsx

@@ -94,15 +94,15 @@ function RoleDetail() {
   const effective = effectiveRolePermissions(catalog, role.key);
 
   return (
-    <div className="mx-auto max-w-3xl space-y-8">
+    <div className="space-y-8">
       <div>
         <Button variant="ghost" size="sm" className="-ml-2 text-muted-foreground" asChild>
           <Link to="/access/roles">
             <ArrowLeft aria-hidden="true" />
             Roles
           </Link>
         </Button>
-        <h1 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">{role.name}</h1>
+        <h2 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">{role.name}</h2>
         <p className="mt-3 text-sm leading-6 text-muted-foreground">
           <KeyChip>{role.key}</KeyChip>
           <span className="ml-2">

src/routes/access/roles/index.tsx

@@ -84,10 +84,9 @@ function RolesIndex() {
 
   return (
     <div className="space-y-8">
-      <div className="flex flex-wrap items-end justify-between gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl">Roles</h1>
-          <p className="mt-3 max-w-xl text-sm leading-6 text-muted-foreground">
+          <p className="max-w-xl text-sm leading-6 text-muted-foreground">
             A role is a named bundle of permissions. Applications read them from the{" "}
             <code className="font-mono text-xs">polinetwork:identity</code> scope.
           </p>

src/routes/access/roles/new.tsx

@@ -37,15 +37,15 @@ function NewRole() {
   }
 
   return (
-    <div className="mx-auto max-w-3xl space-y-8">
+    <div className="space-y-8">
       <div>
         <Button variant="ghost" size="sm" className="-ml-2 text-muted-foreground" asChild>
           <Link to="/access/roles">
             <ArrowLeft aria-hidden="true" />
             Roles
           </Link>
         </Button>
-        <h1 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">New role</h1>
+        <h2 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">New role</h2>
         <p className="mt-3 max-w-xl text-sm leading-6 text-muted-foreground">
           Bundle permissions under one name, then give it to people from the role's page.
         </p>

src/routes/access/route.tsx

@@ -9,7 +9,7 @@ import { ACCESS_TABS } from "@/components/rbac/access-tabs";
 import { Button } from "@/components/ui/button";
 
 export const Route = createFileRoute("/access")({
-  head: () => ({ meta: [{ title: "Roles and permissions · PoliNetwork Auth" }] }),
+  head: () => ({ meta: [{ title: "eRBACo · PoliNetwork Auth" }] }),
   component: AccessLayout,
 });
 
@@ -75,26 +75,29 @@ function AccessLayout() {
       <main className="mx-auto max-w-6xl px-5 py-10 sm:px-8 sm:py-14">
         {access.status === "ready" && visibleTabs.length > 0 ? (
           <div className="space-y-8">
-            <nav aria-label="Access administration" className="flex gap-1 border-b">
-              {visibleTabs.map((tab) => {
-                const current = pathname.startsWith(tab.to);
-                return (
-                  <Link
-                    key={tab.to}
-                    to={tab.to}
-                    aria-current={current ? "page" : undefined}
-                    className={cn(
-                      "-mb-px border-b-2 px-4 py-2.5 text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                      current
-                        ? "border-primary text-foreground"
-                        : "border-transparent text-muted-foreground hover:text-foreground",
-                    )}
-                  >
-                    {tab.label}
-                  </Link>
-                );
-              })}
-            </nav>
+            <div className="space-y-6">
+              <h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl">eRBACo</h1>
+              <nav aria-label="eRBACo administration" className="flex gap-1 border-b">
+                {visibleTabs.map((tab) => {
+                  const current = pathname.startsWith(tab.to);
+                  return (
+                    <Link
+                      key={tab.to}
+                      to={tab.to}
+                      aria-current={current ? "page" : undefined}
+                      className={cn(
+                        "-mb-px border-b-2 px-4 py-2.5 text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        current
+                          ? "border-primary text-foreground"
+                          : "border-transparent text-muted-foreground hover:text-foreground",
+                      )}
+                    >
+                      {tab.label}
+                    </Link>
+                  );
+                })}
+              </nav>
+            </div>
             <IdpAccessProvider access={access}>
               <Outlet />
             </IdpAccessProvider>