From ee8ffeb262aa58bee542b291ac13d04897da8712 Mon Sep 17 00:00:00 2001
From: Daniel Naab <danielnaab@gmail.com>
Date: Thu, 7 May 2026 21:08:36 +0000
Subject: [PATCH 1/9] fix(ui): align mobile nav menu items with divider lines

The mobile nav panel has padding: 1rem, but nav links added an
additional padding-inline: 1rem, causing link text to be inset from
the border separator lines between items. Remove the redundant
inline padding so text aligns flush with the dividers.
---
 src/design-system/components/flex-header/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/design-system/components/flex-header/styles.css b/src/design-system/components/flex-header/styles.css
index 00aa4cd8..7995d284 100644
--- a/src/design-system/components/flex-header/styles.css
+++ b/src/design-system/components/flex-header/styles.css
@@ -380,7 +380,7 @@ flex-header {
 
   .flex-header__nav-link {
     padding-block: 0.75rem;
-    padding-inline: 1rem;
+    padding-inline: 0;
   }
 
   .flex-header__nav-link--current::after,

From 3605de45f1c8e7f73b7a61e65b68c332454763ff Mon Sep 17 00:00:00 2001
From: Daniel Naab <danielnaab@gmail.com>
Date: Thu, 7 May 2026 21:15:12 +0000
Subject: [PATCH 2/9] fix(ui): position close button absolutely so nav items
 start at top

The close button used float:right which is ignored in flex containers,
causing it to consume a full row (~4rem) of vertical space and push
nav items down. Position it absolutely in the top-right corner instead.
Also remove the first nav item's top border and the redundant link
inline padding so items align flush with the panel's divider lines.
---
 src/design-system/components/flex-header/styles.css | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/design-system/components/flex-header/styles.css b/src/design-system/components/flex-header/styles.css
index 7995d284..dabff0b4 100644
--- a/src/design-system/components/flex-header/styles.css
+++ b/src/design-system/components/flex-header/styles.css
@@ -101,8 +101,6 @@ flex-header {
   text-align: center;
   cursor: pointer;
   flex: none;
-  float: right;
-  margin: -0.75rem -1rem 1rem auto;
 
   &:focus {
     outline: 0.25rem solid var(--flex-color-focus);
@@ -366,6 +364,9 @@ flex-header {
 
   .flex-header__close-btn {
     display: block;
+    position: absolute;
+    inset-block-start: 0.25rem;
+    inset-inline-end: 0.25rem;
   }
 
   .flex-header__nav-list {
@@ -378,6 +379,10 @@ flex-header {
     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: 0;

From d90739837ca5ca1ffb7f705a8a5dd603ccd8b9e0 Mon Sep 17 00:00:00 2001
From: Daniel Naab <danielnaab@gmail.com>
Date: Thu, 7 May 2026 21:20:04 +0000
Subject: [PATCH 3/9] fix(ui): keep close button in flow, fix user section
 indentation

- Close button: use align-self: flex-end with negative margins instead
  of absolute positioning (which overlapped first two nav items)
- User panel: reset full padding (not just padding-inline) on mobile
  to eliminate inherited desktop spacing
- Settings link and signout button: zero out padding-inline on mobile
  so text aligns with nav links and divider lines
---
 .../components/flex-header/styles.css          | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/design-system/components/flex-header/styles.css b/src/design-system/components/flex-header/styles.css
index dabff0b4..9d1cd918 100644
--- a/src/design-system/components/flex-header/styles.css
+++ b/src/design-system/components/flex-header/styles.css
@@ -364,9 +364,8 @@ flex-header {
 
   .flex-header__close-btn {
     display: block;
-    position: absolute;
-    inset-block-start: 0.25rem;
-    inset-inline-end: 0.25rem;
+    align-self: flex-end;
+    margin: -0.5rem -0.5rem 0;
   }
 
   .flex-header__nav-list {
@@ -424,19 +423,28 @@ flex-header {
   }
 
   .flex-header__user-identity {
-    padding-inline: 0;
+    padding: 0;
   }
 
   .flex-header__user-theme {
-    padding-inline: 0;
+    padding: 0;
   }
 
   .flex-header__user-settings {
+    padding: 0;
+  }
+
+  .flex-header__user-settings-link {
     padding-inline: 0;
   }
 
   .flex-header__user-signout {
+    padding: 0;
+  }
+
+  .flex-header__user-signout-btn {
     padding-inline: 0;
+    text-align: start;
   }
 
   /* Signed-out parallel: theme toggle as a utility section at the bottom of the panel */

From 715ac8d96583ddad199ffd28fcfa2bbf480d1bdf Mon Sep 17 00:00:00 2001
From: Daniel Naab <danielnaab@gmail.com>
Date: Thu, 7 May 2026 21:24:03 +0000
Subject: [PATCH 4/9] fix(ui): mobile nav vertical position and horizontal
 alignment

Root cause: float:right on the close button is ignored in flex
containers, so it consumed ~3.25rem of vertical space as a flex row
instead of floating out of flow. This pushed nav items down by
roughly two section-heights.

Fix:
- Close button: position absolute in top-right corner (restoring
  the original float:right intent without consuming flow space)
- First nav item: remove top border (no orphan line at list top)
- Nav links: padding-inline 0 so text aligns with divider lines
  (panel padding already provides the overall inset)
---
 .../components/flex-header/styles.css         | 20 +++++++------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/design-system/components/flex-header/styles.css b/src/design-system/components/flex-header/styles.css
index 9d1cd918..dec73b31 100644
--- a/src/design-system/components/flex-header/styles.css
+++ b/src/design-system/components/flex-header/styles.css
@@ -101,6 +101,8 @@ flex-header {
   text-align: center;
   cursor: pointer;
   flex: none;
+  float: right;
+  margin: -0.75rem -1rem 1rem auto;
 
   &:focus {
     outline: 0.25rem solid var(--flex-color-focus);
@@ -364,8 +366,9 @@ flex-header {
 
   .flex-header__close-btn {
     display: block;
-    align-self: flex-end;
-    margin: -0.5rem -0.5rem 0;
+    position: absolute;
+    inset-block-start: 0.5rem;
+    inset-inline-end: 0.5rem;
   }
 
   .flex-header__nav-list {
@@ -423,28 +426,19 @@ flex-header {
   }
 
   .flex-header__user-identity {
-    padding: 0;
+    padding-inline: 0;
   }
 
   .flex-header__user-theme {
-    padding: 0;
+    padding-inline: 0;
   }
 
   .flex-header__user-settings {
-    padding: 0;
-  }
-
-  .flex-header__user-settings-link {
     padding-inline: 0;
   }
 
   .flex-header__user-signout {
-    padding: 0;
-  }
-
-  .flex-header__user-signout-btn {
     padding-inline: 0;
-    text-align: start;
   }
 
   /* Signed-out parallel: theme toggle as a utility section at the bottom of the panel */

From 49abdca25f8c61387c24762ce043cc65e1c5bb95 Mon Sep 17 00:00:00 2001
From: Daniel Naab <danielnaab@gmail.com>
Date: Thu, 7 May 2026 21:50:55 +0000
Subject: [PATCH 5/9] fix(ui): mobile nav items too low, text misaligned with
 borders

Root cause: the close button's base styles (float:right, margin with
1rem bottom) were never fully neutralized in the mobile override.
In a flex column container float is ignored, so the button consumed
~3.25rem as a flex row. Previous fix attempts added position:absolute
but left float and margin inherited, which could still affect layout
on iOS WebKit.

Fix: explicitly reset float:none and margin:0 alongside position:
absolute, using physical properties (top/right) for maximum browser
compatibility. Also remove first-child top border and zero out nav
link inline padding so text aligns flush with divider lines.
---
 src/design-system/components/flex-header/styles.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/design-system/components/flex-header/styles.css b/src/design-system/components/flex-header/styles.css
index dec73b31..a7a09eaf 100644
--- a/src/design-system/components/flex-header/styles.css
+++ b/src/design-system/components/flex-header/styles.css
@@ -367,8 +367,10 @@ flex-header {
   .flex-header__close-btn {
     display: block;
     position: absolute;
-    inset-block-start: 0.5rem;
-    inset-inline-end: 0.5rem;
+    top: 0.5rem;
+    right: 0.5rem;
+    float: none;
+    margin: 0;
   }
 
   .flex-header__nav-list {

From bdbb4ac809b038f98f8f4b4c039e454b2bf72a19 Mon Sep 17 00:00:00 2001
From: Daniel Naab <danielnaab@gmail.com>
Date: Thu, 7 May 2026 22:13:15 +0000
Subject: [PATCH 6/9] fix(ui): convert mobile nav from hardcoded rem to
 px/tokens
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The design system switched spacing tokens to px units, but the header
component still used hardcoded rem values. On iOS, rem can resolve
differently than expected. Convert mobile nav styles to px and token
variables for consistency with the rest of the design system:
- padding: 1rem → var(--flex-space-md)
- close button insets: 0.5rem → var(--flex-space-sm)
- nav link padding: 0.75rem → 12px
- panel width/animation: 15rem → 240px
---
 src/design-system/components/flex-header/styles.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/design-system/components/flex-header/styles.css b/src/design-system/components/flex-header/styles.css
index a7a09eaf..a3ae3c23 100644
--- a/src/design-system/components/flex-header/styles.css
+++ b/src/design-system/components/flex-header/styles.css
@@ -354,8 +354,8 @@ flex-header {
     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 {
@@ -367,8 +367,8 @@ flex-header {
   .flex-header__close-btn {
     display: block;
     position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
+    top: var(--flex-space-sm);
+    right: var(--flex-space-sm);
     float: none;
     margin: 0;
   }
@@ -388,7 +388,7 @@ flex-header {
   }
 
   .flex-header__nav-link {
-    padding-block: 0.75rem;
+    padding-block: 12px;
     padding-inline: 0;
   }
 
@@ -457,7 +457,7 @@ flex-header {
 
 @keyframes flex-header-slidein {
   0% {
-    transform: translateX(15rem);
+    transform: translateX(240px);
   }
 
   100% {

From 7467b66a922d9cd95d725aaef72974cfc5d16497 Mon Sep 17 00:00:00 2001
From: Daniel Naab <danielnaab@gmail.com>
Date: Thu, 7 May 2026 22:40:21 +0000
Subject: [PATCH 7/9] fix(ui): rewrite mobile nav layout from flex to block,
 rem to px
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: the mobile nav used display:flex, which silently disabled
float:right on the close button. The nav-list (also display:flex)
created a block formatting context that couldn't overlap the float.
Combined with hardcoded rem values (vs the design system's px tokens),
this caused the close button to consume ~3.25rem of vertical space,
pushing nav items down by roughly two section-heights.

Rewrite the mobile nav panel to use display:block throughout:
- Nav panel: display:block (via .is-visible), not flex
- Nav list: display:block, not flex — no BFC, float works naturally
- Nav links: display:block with block-size:auto (override desktop 100%)
- Close button: float:right works as originally designed
- All rem values → px or design token variables
- Physical properties (top/right/bottom) for iOS compatibility
- First nav item border removed, link padding-inline zeroed
---
 .../components/flex-header/styles.css         | 29 +++++++++----------
 1 file changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/design-system/components/flex-header/styles.css b/src/design-system/components/flex-header/styles.css
index a3ae3c23..351c26db 100644
--- a/src/design-system/components/flex-header/styles.css
+++ b/src/design-system/components/flex-header/styles.css
@@ -345,38 +345,34 @@ 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: 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;
-    position: absolute;
-    top: var(--flex-space-sm);
-    right: var(--flex-space-sm);
-    float: none;
-    margin: 0;
+    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 {
@@ -388,8 +384,9 @@ flex-header {
   }
 
   .flex-header__nav-link {
-    padding-block: 12px;
-    padding-inline: 0;
+    display: block;
+    block-size: auto;
+    padding: 12px 0;
   }
 
   .flex-header__nav-link--current::after,

From 8eaeddc7669b0c167d7fa88ad6278f5cf0460b5c Mon Sep 17 00:00:00 2001
From: Daniel Naab <danielnaab@gmail.com>
Date: Thu, 7 May 2026 22:43:09 +0000
Subject: [PATCH 8/9] fix(ui): use spacing token for nav link padding

Replace hardcoded 12px with var(--flex-space-sm) to stay on the
design system's spacing scale.
---
 src/design-system/components/flex-header/styles.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/design-system/components/flex-header/styles.css b/src/design-system/components/flex-header/styles.css
index 351c26db..30253fc9 100644
--- a/src/design-system/components/flex-header/styles.css
+++ b/src/design-system/components/flex-header/styles.css
@@ -386,7 +386,7 @@ flex-header {
   .flex-header__nav-link {
     display: block;
     block-size: auto;
-    padding: 12px 0;
+    padding: var(--flex-space-sm) 0;
   }
 
   .flex-header__nav-link--current::after,

From d0e197b09dd36a234963ac353969f58d9df07cfa Mon Sep 17 00:00:00 2001
From: Daniel Naab <danielnaab@gmail.com>
Date: Thu, 7 May 2026 22:46:37 +0000
Subject: [PATCH 9/9] style(auth): fix import ordering

Sort imports to satisfy biome organizeImports rule.
---
 src/entrypoints/app/routes/auth/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/entrypoints/app/routes/auth/index.tsx b/src/entrypoints/app/routes/auth/index.tsx
index dc7c3ad6..883b0998 100644
--- a/src/entrypoints/app/routes/auth/index.tsx
+++ b/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,