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

Author: RandyJDean

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>
     </>