fix(ui): mobile nav items too low, text misaligned with borders (#136)

Root cause: the mobile nav used display:flex, which silently disabled
float:right on the close button. The close button consumed ~3.25rem as
a flex row, pushing nav items down by two section-heights. Hardcoded rem
values also conflicted with the design system's px-based spacing tokens,
causing inconsistent rendering on iOS.

Fix:
- Rewrite mobile nav to display:block so float:right works as designed
- Convert all rem values to px or design token variables
- Nav list and links also display:block (prevents BFC overlap with float)
- Physical properties (top/right/bottom) for cross-browser compatibility
- Fix pre-existing import ordering lint error in auth route

Author: danielnaab

src/design-system/components/flex-header/styles.css

@@ -345,42 +345,48 @@ flex-header {
 
   .flex-header__nav {
     position: fixed;
-    inset-inline-end: 0;
-    inset-block-end: 0;
-    inset-block-start: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
     background: var(--flex-color-surface);
     border-inline-end: 0;
     display: none;
-    flex-direction: column;
-    justify-content: flex-start;
     overflow-y: auto;
-    padding: 1rem;
-    inline-size: 15rem;
+    padding: var(--flex-space-md);
+    inline-size: 240px;
     z-index: 500;
 
     &.is-visible {
-      display: flex;
+      display: block;
       animation: flex-header-slidein 0.3s ease-in-out;
     }
   }
 
   .flex-header__close-btn {
     display: block;
+    block-size: 48px;
+    inline-size: 48px;
   }
 
   .flex-header__nav-list {
-    flex-direction: column;
-    align-items: stretch;
-    inline-size: 100%;
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
 
   .flex-header__nav-item {
     border-block-start: 1px solid var(--flex-color-border);
   }
 
+  .flex-header__nav-item:first-child {
+    border-block-start: 0;
+  }
+
   .flex-header__nav-link {
-    padding-block: 0.75rem;
-    padding-inline: 1rem;
+    display: block;
+    block-size: auto;
+    padding: var(--flex-space-sm) 0;
   }
 
   .flex-header__nav-link--current::after,
@@ -448,7 +454,7 @@ flex-header {
 
 @keyframes flex-header-slidein {
   0% {
-    transform: translateX(15rem);
+    transform: translateX(240px);
   }
 
   100% {

src/entrypoints/app/routes/auth/index.tsx

@@ -1,7 +1,7 @@
 import { Hono } from 'hono'
 import { deleteCookie, setCookie } from 'hono/cookie'
-import type { ActivityStore } from '../../../../services/activity'
 import { Layout } from '../../../../design-system/components/flex-layout'
+import type { ActivityStore } from '../../../../services/activity'
 import type { AccessStore, UserStore } from '../../../../services/auth'
 import {
   COOKIE_MAX_AGE,