Bug: Mobile — dark/light theme toggle hidden behind bottom nav bar #51

New issue

Closed

opened 2026-04-06 04:26:04 +00:00 by Brouie · 7 comments

Brouie commented

2026-04-06 04:26:04 +00:00

(Migrated from gitlab.com)

Current behavior: on mobile viewports (iPhone 14 Pro Max, Samsung, Pixel 7, Surface Duo), tapping More in the bottom nav opens a menu showing Trader, Protocol, Fee Tiers, Create Pair. the dark/light theme toggle buttons below these items are cut off by the bottom nav bar and not reachable.

Expected behavior: More menu should scroll or position so the theme toggle is fully visible and tappable above the bottom nav.

Acceptance criteria:

dark/light toggle fully visible on iPhone 14 Pro Max (430x932)
dark/light toggle fully visible on Samsung Galaxy S21 (360x800)
dark/light toggle fully visible on Pixel 7 (412x915)
dark/light toggle fully visible on Surface Duo (540x720)
manual QA pass on all above viewports
screenshot evidence of fix

tested on 671e72f. screenshot attached in comments.

**Current behavior:** on mobile viewports (iPhone 14 Pro Max, Samsung, Pixel 7, Surface Duo), tapping More in the bottom nav opens a menu showing Trader, Protocol, Fee Tiers, Create Pair. the dark/light theme toggle buttons below these items are cut off by the bottom nav bar and not reachable. **Expected behavior:** More menu should scroll or position so the theme toggle is fully visible and tappable above the bottom nav. **Acceptance criteria:** - [ ] dark/light toggle fully visible on iPhone 14 Pro Max (430x932) - [ ] dark/light toggle fully visible on Samsung Galaxy S21 (360x800) - [ ] dark/light toggle fully visible on Pixel 7 (412x915) - [ ] dark/light toggle fully visible on Surface Duo (540x720) - [ ] manual QA pass on all above viewports - [ ] screenshot evidence of fix tested on 671e72f. screenshot attached in comments.

Brouie commented

2026-04-06 04:27:41 +00:00

(Migrated from gitlab.com)

{width=502 height=600}

![image.png](/uploads/bb613d734d1a596a9db1ef97c7f36e1c/image.png){width=502 height=600}

Brouie commented

2026-04-06 04:29:19 +00:00

(Migrated from gitlab.com)

mentioned in issue #44

Brouie commented

2026-04-06 06:13:45 +00:00

(Migrated from gitlab.com)

mentioned in issue #50

PlasticDigits commented

2026-04-06 12:30:11 +00:00

(Migrated from gitlab.com)

mentioned in commit f3a18dcdeb

mentioned in commit f3a18dcdeb6dcce2f3dd36485f283a97b3c55c5e

PlasticDigits commented

2026-04-06 12:30:20 +00:00

(Migrated from gitlab.com)

Shipped a fix in main (commit f3a18dc).

Cause: The More sheet used a fixed bottom: 84px while the real mobile bottom bar is taller (padding + row height + safe-area-inset-bottom, and actual row height can exceed the 52px min when the layout resolves). The bar also sits at z-index: 50 vs the sheet at 32, so the theme controls ended up under the nav and were not reachable.

Fix: useSyncMobileNavStack measures the live nav height with ResizeObserver, writes --app-mobile-nav-stack on .app-shell, and the sheet uses bottom: calc(var(...) + 8px) plus a max-height and overflow-y: auto for short viewports. Sheet z-index is raised above the bar. Footer and mobile theme toggles are deduplicated via ThemeSegmentedControl; unit tests cover the hook and control.

@Brouie could you verify on the listed viewports (and attach a screenshot) when you have a moment? Leaving this issue open until QA sign-off.

Shipped a fix in `main` (commit f3a18dc). **Cause:** The More sheet used a fixed `bottom: 84px` while the real mobile bottom bar is taller (padding + row height + `safe-area-inset-bottom`, and actual row height can exceed the 52px min when the layout resolves). The bar also sits at `z-index: 50` vs the sheet at `32`, so the theme controls ended up under the nav and were not reachable. **Fix:** `useSyncMobileNavStack` measures the live nav height with `ResizeObserver`, writes `--app-mobile-nav-stack` on `.app-shell`, and the sheet uses `bottom: calc(var(...) + 8px)` plus a `max-height` and `overflow-y: auto` for short viewports. Sheet `z-index` is raised above the bar. Footer and mobile theme toggles are deduplicated via `ThemeSegmentedControl`; unit tests cover the hook and control. @Brouie could you verify on the listed viewports (and attach a screenshot) when you have a moment? Leaving this issue open until QA sign-off.

Brouie commented

2026-04-07 03:37:27 +00:00

(Migrated from gitlab.com)

Verified on 38afbf8. Dynamic --app-mobile-nav-stack CSS var via ResizeObserver tracks actual bottom nav height. Portals and modals now account for it via getMobileBottomNavInsetPx. Theme toggle in More menu sits above bottom nav. Three commits (f3a18dc, aeb28b4, 38afbf8) covering More menu, portal/modal spacing, and desktop viewport caps. New tests: mobileBottomNav (3), ThemeSegmentedControl (2). Frontend 214/214.

Verified on 38afbf8. Dynamic --app-mobile-nav-stack CSS var via ResizeObserver tracks actual bottom nav height. Portals and modals now account for it via getMobileBottomNavInsetPx. Theme toggle in More menu sits above bottom nav. Three commits (f3a18dc, aeb28b4, 38afbf8) covering More menu, portal/modal spacing, and desktop viewport caps. New tests: mobileBottomNav (3), ThemeSegmentedControl (2). Frontend 214/214.

Brouie (Migrated from gitlab.com) closed this issue

2026-04-07 03:37:44 +00:00

PlasticDigits commented

2026-05-30 06:11:52 +00:00

(Migrated from gitlab.com)

mentioned in issue #220