[fix](trx-frontend-http): render the header menus above the page #27

2026-08-02T19:19:55+02:00

sjg commented

2026-08-02 19:19:55 +02:00

Fixes both regressions from the navigation change.

What was broken

The navigation menu opened as an 18px sliver positioned above its own button, and the overflow menu measured 0×0 — it never appeared at all. Both were being laid out inside the bar instead of over the page.

Two causes

1. The tab strip still had overflow-x: auto. It kept that from when it scrolled, and a scrolling ancestor clips absolutely positioned descendants — the strip is exactly what the navigation menu anchors to. The strip no longer scrolls now that the occasional destinations sit behind More, so the property is gone along with the edge fade that existed to signal scrolling.

2. Absolute positioning was the wrong tool. It is clipped by any scrolling ancestor and trapped inside whatever stacking context ancestors create, so a dropdown can be squashed inside the bar or painted underneath page content — both of which happened here. Both menus are now anchored in fixed coordinates at open time, which answer to the viewport, and flip above their button near the bottom edge.

A third defect surfaced while fixing those: with a JS left and the stylesheet's right: 0 both applied, the menus stretched between the two edges — 845px wide for a four-item list. Clearing right restores natural width.

Verified in Chromium

	before	after
nav More menu	18px tall, above its button	206×193, anchored below, over content
actions ⋯ menu	0×0, never opened	210×129, anchored below

Full gate green — typecheck, lint, 34/34 test, build, test:browser.

🤖 Generated with Claude Code

https://claude.ai/code/session_01GdyUjuXejCEfiub675z6cz

Fixes both regressions from the navigation change. ## What was broken The navigation menu opened as an **18px sliver positioned above its own button**, and the overflow menu measured 0×0 — it never appeared at all. Both were being laid out *inside* the bar instead of over the page. ## Two causes **1. The tab strip still had `overflow-x: auto`.** It kept that from when it scrolled, and a scrolling ancestor clips absolutely positioned descendants — the strip is exactly what the navigation menu anchors to. The strip no longer scrolls now that the occasional destinations sit behind More, so the property is gone along with the edge fade that existed to signal scrolling. **2. Absolute positioning was the wrong tool.** It is clipped by any scrolling ancestor and trapped inside whatever stacking context ancestors create, so a dropdown can be squashed inside the bar or painted underneath page content — both of which happened here. Both menus are now anchored in **fixed coordinates** at open time, which answer to the viewport, and flip above their button near the bottom edge. A third defect surfaced while fixing those: with a JS `left` and the stylesheet's `right: 0` both applied, the menus stretched between the two edges — **845px wide for a four-item list**. Clearing `right` restores natural width. ## Verified in Chromium | | before | after | | --- | --- | --- | | nav More menu | 18px tall, above its button | 206×193, anchored below, over content | | actions ⋯ menu | 0×0, never opened | 210×129, anchored below | Full gate green — `typecheck`, `lint`, 34/34 `test`, `build`, `test:browser`. 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01GdyUjuXejCEfiub675z6cz

sjg added 1 commit 2026-08-02 19:19:56 +02:00

[fix](trx-frontend-http): render the header menus above the page

CI / lint (push) Successful in 2m17s

Details

CI / test (push) Successful in 7m23s

Details

CI / lint (pull_request) Successful in 2m16s

Details

CI / test (pull_request) Successful in 8m13s

Details

CI / frontend (pull_request) Successful in 2m59s

Details

CI / reuse (pull_request) Successful in 3s

Details

CI / frontend (push) Successful in 2m10s

Details

CI / reuse (push) Successful in 3s

Details

b4912f5879

Both header dropdowns were laid out inside the bar rather than over the
page.  The navigation menu opened as an 18px sliver positioned above its
own button, and the overflow menu did not appear at all.

Two causes.  The tab strip kept `overflow-x: auto` from when it scrolled,
which clips an absolutely positioned descendant — and the strip is what
the navigation menu anchors to.  The strip no longer scrolls, since the
occasional destinations moved behind More, so the property and the edge
fade that went with it are both gone.

Anchoring in fixed coordinates at open time addresses the general case:
an absolutely positioned menu is clipped by any scrolling ancestor and
trapped inside whatever stacking context its ancestors create, so it can
be squashed inside the bar or painted underneath page content.  Fixed
coordinates answer to the viewport, and the menu flips above its button
near the bottom edge.

Clearing `right` when setting `left` keeps the menus at their natural
width: the stylesheet pins them to the right of their anchor, and leaving
that in place stretched them across the bar — 845px for a four-item list.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GdyUjuXejCEfiub675z6cz
Signed-off-by: Stan Grams <sjg@haxx.space>

sjg merged commit b4912f5879 into main

2026-08-02 19:20:31 +02:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: sjg/trx-rs#27