code/cl8y-dex-terraclassic

Fork 0

W10-C5: Dark/light mode toggle placed at bottom of page. It is inaccessible on content-heavy routes without scrolling #170

New issue

Closed

opened 2026-05-19 09:09:10 +00:00 by totdking · 12 comments

totdking commented

2026-05-19 09:09:10 +00:00

(Migrated from gitlab.com)

No description provided.

totdking commented

2026-05-19 09:11:30 +00:00

(Migrated from gitlab.com)

Issue Summary

The dark/light mode toggle is positioned at the bottom of the page. On content-heavy routes such as /pool where the available pools list can be long, a user must scroll all the way to the bottom to reach the toggle. This makes theme switching effectively hidden for most users. The toggle should be relocated to the header or settings panel where it is reachable from any scroll position on any route.

Reproduction Steps

Navigate to /pool
Observe the pool list, multiple pools are rendered, requiring vertical scroll
Scroll to the bottom of the page
Locate the dark/light mode toggle, it is only accessible at the very bottom
Repeat on /trade or /swap with a long order history or advanced panel open, same issue

Expected Behavior

The dark/light mode toggle should be placed in the header (alongside the settings icon or wallet chip) It should be reachable from any scroll position without requiring the user to scroll to the bottom of the page.

Actual Behavior

The toggle sits at the bottom of the page. On routes with substantial vertical content (e.g. /pool with many available pools), the user must scroll past all content to reach it. New users are unlikely to find it at all.

Environment Details

Field	Value
OS	macOS (Apple M1 Pro, 14-inch)
Browser	Google Chrome (desktop)
Viewport	~1440px desktop
Network	`localterra` (local Docker)
Frontend	`VITE_NETWORK=local npm run dev`

Wallet / Device Details

Wallet: Connected — localterra
Page tested: /pool, /swap, /trade

Severity / Impact

P2 Polish. No functionality is broken; the toggle works when reached. However placing a global UI preference control at the bottom of a scrollable page is a discoverability failure. Users on content-heavy routes like /pool are unlikely to scroll all the way down for a theme switch, and the toggle effectively becomes invisible. Moving it to the header costs minimal layout work and immediately improves discoverability across all routes. Found under W10-C5 (Theme / density : Display and Interactivity dimensions).

cc: @PlasticDigits

### Issue Summary The dark/light mode toggle is positioned at the bottom of the page. On content-heavy routes such as `/pool` where the available pools list can be long, a user must scroll all the way to the bottom to reach the toggle. This makes theme switching effectively hidden for most users. The toggle should be relocated to the header or settings panel where it is reachable from any scroll position on any route. --- ### Reproduction Steps 1. Navigate to `/pool` 2. Observe the pool list, multiple pools are rendered, requiring vertical scroll 3. Scroll to the bottom of the page 4. Locate the dark/light mode toggle, it is only accessible at the very bottom 5. Repeat on `/trade` or `/swap` with a long order history or advanced panel open, same issue --- ### Expected Behavior The dark/light mode toggle should be placed in the header (alongside the settings icon or wallet chip) It should be reachable from any scroll position without requiring the user to scroll to the bottom of the page. --- ### Actual Behavior The toggle sits at the bottom of the page. On routes with substantial vertical content (e.g. `/pool` with many available pools), the user must scroll past all content to reach it. New users are unlikely to find it at all. --- ### Environment Details | Field | Value | |-------|-------| | OS | macOS (Apple M1 Pro, 14-inch) | | Browser | Google Chrome (desktop) | | Viewport | \~1440px desktop | | Network | `localterra` (local Docker) | | Frontend | `VITE_NETWORK=local npm run dev` | --- ### Wallet / Device Details - **Wallet:** Connected — localterra - **Page tested:** `/pool`, `/swap`, `/trade` --- ### Severity / Impact **P2 Polish.** No functionality is broken; the toggle works when reached. However placing a global UI preference control at the bottom of a scrollable page is a discoverability failure. Users on content-heavy routes like `/pool` are unlikely to scroll all the way down for a theme switch, and the toggle effectively becomes invisible. Moving it to the header costs minimal layout work and immediately improves discoverability across all routes. Found under **W10-C5** (Theme / density : Display and Interactivity dimensions). cc: @PlasticDigits

PlasticDigits commented

2026-05-20 04:16:14 +00:00

(Migrated from gitlab.com)

mentioned in commit cf57b6ddc6

mentioned in commit cf57b6ddc61ef4167bcd093b942f8e94547acb92

PlasticDigits commented

2026-05-20 04:16:35 +00:00

(Migrated from gitlab.com)

Fix shipped on `main` (`cf57b6d`)

Moved the dark/light theme toggle from the page footer into the sticky header on viewports ≥768px (desktop/tablet), so it stays reachable on long routes like /pool and /trade without scrolling to the bottom. On mobile (≤767px), the footer chrome remains hidden; theme switching stays in the More sheet (unchanged).

What changed

Layout.tsx: ThemeSegmentedControl in .app-header-controls when not on mobile; removed from footer
index.css: .app-header-theme-group styles
Docs: docs/frontend.md invariant row + GitLab #170
Agent playbook: skills/AGENTS_FRONTEND_THEME_TOGGLE.md (cross-linked from AGENTS_FRONTEND_RESPONSIVE_HEADER.md)
E2E: desktop header visibility + theme switch on /pool (navigation.spec.ts)
QA template rows 9.2.6 / 10.1.5 updated for header vs More sheet

Verification checklist

Desktop (≥1024px): open /pool with many pools — Dark/Light visible in top header next to network badge / wallet without scrolling
Click Light — page switches immediately; document.documentElement has data-theme="light"; preference persists after reload
Tablet (768–1023px): same header toggle visible; header nav (Swap + More) does not overlap wallet row
Mobile (≤767px): header has no theme buttons; open More → Dark theme / Light theme above bottom tab bar
Footer on desktop: branding + legal copy only — no theme control in footer
/trade, /swap: toggle reachable without scrolling page content

@totdking — please verify on your M1 / Chrome setup when convenient. Leaving this issue open until you sign off.

cc @PlasticDigits

## Fix shipped on `main` (cf57b6d) Moved the dark/light **theme toggle** from the page footer into the **sticky header** on viewports **≥768px** (desktop/tablet), so it stays reachable on long routes like `/pool` and `/trade` without scrolling to the bottom. On mobile (**≤767px**), the footer chrome remains hidden; theme switching stays in the **More** sheet (unchanged). ### What changed - `Layout.tsx`: `ThemeSegmentedControl` in `.app-header-controls` when not on mobile; removed from footer - `index.css`: `.app-header-theme-group` styles - Docs: `docs/frontend.md` invariant row + GitLab #170 - Agent playbook: `skills/AGENTS_FRONTEND_THEME_TOGGLE.md` (cross-linked from `AGENTS_FRONTEND_RESPONSIVE_HEADER.md`) - E2E: desktop header visibility + theme switch on `/pool` (`navigation.spec.ts`) - QA template rows 9.2.6 / 10.1.5 updated for header vs More sheet ### Verification checklist - [ ] Desktop (≥1024px): open `/pool` with many pools — **Dark/Light** visible in top header next to network badge / wallet without scrolling - [ ] Click **Light** — page switches immediately; `document.documentElement` has `data-theme="light"`; preference persists after reload - [ ] Tablet (768–1023px): same header toggle visible; header nav (Swap + More) does not overlap wallet row - [ ] Mobile (≤767px): header has **no** theme buttons; open **More** → **Dark theme** / **Light theme** above bottom tab bar - [ ] Footer on desktop: branding + legal copy only — **no** theme control in footer - [ ] `/trade`, `/swap`: toggle reachable without scrolling page content @totdking — please verify on your M1 / Chrome setup when convenient. Leaving this issue **open** until you sign off. cc @PlasticDigits

totdking commented

2026-05-20 05:10:44 +00:00

(Migrated from gitlab.com)

mentioned in issue #116

PlasticDigits commented

2026-05-27 05:49:40 +00:00

(Migrated from gitlab.com)

Verified and closed

Re-verified the fix already on main (originally shipped in cf57b6d). No additional code changes were required.

Verification checklist (all passed)

Desktop (1280px) /pool: Dark/Light toggle visible in sticky header (.app-header-theme-group) next to network badge / wallet without scrolling; no theme control in footer.
Click Light: document.documentElement gets data-theme="light" immediately; preference persists in localStorage (cl8y-dex-theme) after reload.
Tablet (768–1023px): Header toggle visible; Swap + More nav row has no horizontal overlap (7 viewport sizes in navigation.spec.ts).
Mobile (≤767px): No theme buttons in header; More sheet exposes Dark theme / Light theme above the bottom tab bar.
Footer (desktop): Branding + legal copy only — no theme control.
/trade, /swap: Header theme toggle reachable without scrolling page content.

How verified

Playwright E2E: navigation.spec.ts theme + tablet overlap tests (11/11 passed with PLAYWRIGHT_SKIP_CHAIN=1).
Additional one-off Playwright checks for /trade, /swap, reload persistence, and mobile More sheet (3/3 passed).
Unit: ThemeSegmentedControl.test.tsx (2/2 passed).
Infra: LocalTerra healthy, host Postgres on :5432, indexer at :3001, frontend at :3000, bot swarm 30/30.

Note: Cursor browser MCP was unavailable in this session; visual checks were covered by Playwright assertions (visibility, bounding boxes, sticky header placement, click + data-theme + reload).

## Verified and closed Re-verified the fix already on `main` (originally shipped in cf57b6d). No additional code changes were required. ### Verification checklist (all passed) - **Desktop (1280px) `/pool`:** Dark/Light toggle visible in sticky header (`.app-header-theme-group`) next to network badge / wallet without scrolling; no theme control in footer. - **Click Light:** `document.documentElement` gets `data-theme="light"` immediately; preference persists in `localStorage` (`cl8y-dex-theme`) after reload. - **Tablet (768–1023px):** Header toggle visible; Swap + More nav row has no horizontal overlap (7 viewport sizes in `navigation.spec.ts`). - **Mobile (≤767px):** No theme buttons in header; **More** sheet exposes **Dark theme** / **Light theme** above the bottom tab bar. - **Footer (desktop):** Branding + legal copy only — no theme control. - **`/trade`, `/swap`:** Header theme toggle reachable without scrolling page content. ### How verified - Playwright E2E: `navigation.spec.ts` theme + tablet overlap tests (11/11 passed with `PLAYWRIGHT_SKIP_CHAIN=1`). - Additional one-off Playwright checks for `/trade`, `/swap`, reload persistence, and mobile More sheet (3/3 passed). - Unit: `ThemeSegmentedControl.test.tsx` (2/2 passed). - Infra: LocalTerra healthy, host Postgres on `:5432`, indexer at `:3001`, frontend at `:3000`, bot swarm 30/30. **Note:** Cursor browser MCP was unavailable in this session; visual checks were covered by Playwright assertions (visibility, bounding boxes, sticky header placement, click + `data-theme` + reload).

PlasticDigits (Migrated from gitlab.com) closed this issue

2026-05-27 05:49:42 +00:00

PlasticDigits commented

2026-06-25 13:12:41 +00:00

(Migrated from gitlab.com)

mentioned in issue #411