From 51e0a4c1cc0d324e5b4fe12caeeeb5081b04ffa7 Mon Sep 17 00:00:00 2001
From: Randy Dean <randyjdean0@gmail.com>
Date: Thu, 16 Apr 2026 17:28:30 -0400
Subject: [PATCH] 901: center mobile navigation title and login button

901: Copilot rebase
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

901: More accessible header navigation
---
 js/src/components/ui/header/Header.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/js/src/components/ui/header/Header.tsx b/js/src/components/ui/header/Header.tsx
index ffda01fa2..ab12db6b6 100644
--- a/js/src/components/ui/header/Header.tsx
+++ b/js/src/components/ui/header/Header.tsx
@@ -112,8 +112,19 @@ export default function Header() {
         withCloseButton={false}
         size="50%"
         title="Navigation"
+        styles={{
+          header: {
+            justifyContent: "center",
+          },
+          title: {
+            textAlign: "center",
+            fontWeight: 700,
+            fontSize: "var(--mantine-font-size-lg)",
+            marginBottom: "var(--mantine-spacing-xs)",
+          },
+        }}
       >
-        <Flex direction="column" align="center" gap="xs">
+        <Flex direction="column" align="center" gap="xs" w="100%">
           {navButtons.map(({ to, label }) => (
             <Button
               component={Link}
@@ -127,7 +138,9 @@ export default function Header() {
               {label}
             </Button>
           ))}
-          {renderButton("w-full")}
+          <Flex justify="center" w="100%" mt="xs">
+            {renderButton("full-width")}
+          </Flex>
         </Flex>
       </Drawer>
     </>