its been a while

app/templates/base.html

@@ -15,13 +15,41 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
     {% tailwind_css %}
+    <style>
+      .kw-shell-width {
+        max-width: 80rem;
+      }
+      html[data-display-mode="full"] .kw-shell-width {
+        max-width: min(1800px, calc(100vw - 1.5rem));
+      }
+      @media (min-width: 640px) {
+        html[data-display-mode="full"] .kw-shell-width {
+          max-width: min(1880px, calc(100vw - 3rem));
+        }
+      }
+    </style>
+    <script>
+      (function () {
+        var key = "keywardenDisplayMode";
+        function normalize(mode) {
+          return mode === "full" ? "full" : "compact";
+        }
+        var mode = "compact";
+        try {
+          mode = normalize(window.localStorage.getItem(key));
+        } catch (err) {
+          mode = "compact";
+        }
+        document.documentElement.setAttribute("data-display-mode", mode);
+      })();
+    </script>
     {% block extra_head %}{% endblock %}
   </head>
   <body class="min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100 text-slate-900 antialiased font-['Space_Grotesk']">
     <div class="min-h-screen flex flex-col">
     {% if not is_popout %}
       <header class="border-b border-gray-200 bg-white/90 backdrop-blur supports-[backdrop-filter]:bg-white/75">
-        <nav class="mx-auto max-w-screen-xl px-4 py-3 lg:px-6">
+        <nav class="kw-shell-width mx-auto w-full px-4 py-3 lg:px-6">
           <div class="flex flex-wrap items-center justify-between">
             <a href="/" class="flex items-center gap-3">
               <span class="flex h-11 w-11 items-center justify-center rounded-2xl bg-white p-1 shadow-sm ring-1 ring-blue-100">
@@ -80,6 +108,16 @@
                       Profile
                     </a>
                   </li>
+                  {% if request.user.is_superuser or request.user.is_staff or perms.servers.change_server or perms.access.change_accessrequest %}
+                    <li>
+                      <a
+                        href="{% url 'servers:admin_dashboard' %}"
+                        class="block rounded px-3 py-2 hover:bg-gray-100 md:px-0 md:py-0 md:hover:bg-transparent md:hover:text-blue-700"
+                      >
+                        Admin
+                      </a>
+                    </li>
+                  {% endif %}
                 {% endif %}
               </ul>
             </div>
@@ -88,13 +126,13 @@
       </header>
     {% endif %}
 
-    <main class="mx-auto w-full max-w-screen-xl flex-1 px-4 py-8 sm:px-6 lg:px-8">
+    <main class="kw-shell-width mx-auto w-full flex-1 px-4 py-8 sm:px-6 lg:px-8">
       {% block content %}{% endblock %}
     </main>
 
     {% if not is_popout %}
       <footer class="border-t border-gray-200 bg-white">
-        <div class="mx-auto flex w-full max-w-screen-xl flex-col gap-2 px-4 py-6 text-sm text-gray-500 sm:flex-row sm:items-center sm:justify-between sm:px-6 lg:px-8">
+        <div class="kw-shell-width mx-auto flex w-full flex-col gap-2 px-4 py-6 text-sm text-gray-500 sm:flex-row sm:items-center sm:justify-between sm:px-6 lg:px-8">
           <div class="flex items-center gap-2">
             <span class="font-medium text-gray-700">Keywarden</span>
             <span class="text-gray-300">•</span>
@@ -109,6 +147,36 @@
       </footer>
     {% endif %}
     </div>
+    <script>
+      (function () {
+        var key = "keywardenDisplayMode";
+        function normalize(mode) {
+          return mode === "full" ? "full" : "compact";
+        }
+        function getMode() {
+          try {
+            return normalize(window.localStorage.getItem(key));
+          } catch (err) {
+            return "compact";
+          }
+        }
+        function setMode(mode) {
+          var normalized = normalize(mode);
+          document.documentElement.setAttribute("data-display-mode", normalized);
+          try {
+            window.localStorage.setItem(key, normalized);
+          } catch (err) {
+            // Ignore storage quota or privacy-mode failures.
+          }
+          if (typeof window.CustomEvent === "function") {
+            window.dispatchEvent(new CustomEvent("keywarden:display-mode", { detail: { mode: normalized } }));
+          }
+          return normalized;
+        }
+        window.keywardenGetDisplayMode = getMode;
+        window.keywardenSetDisplayMode = setMode;
+      })();
+    </script>
     <script src="https://cdn.jsdelivr.net/npm/flowbite@4.0.1/dist/flowbite.min.js"></script>
   </body>
 </html>