Skip to content

fix(web): keep the bar's labels on one line at tablet widths - #759

Merged
efiten merged 3 commits into
masterfrom
fix/auth-btn-one-line
Oct 31, 2026
Merged

fix(web): keep the bar's labels on one line at tablet widths#759
efiten merged 3 commits into
masterfrom
fix/auth-btn-one-line

Conversation

@efiten

@efiten efiten commented Oct 29, 2026 •
edited
Loading

Copy link
Copy Markdown
Owner

Closes #757

What changes

  • #hp-toggle, #tr-toggle and #auth-btn get white-space:nowrap (web/style.css).
  • Kept on one line, the controls need more room than the row has: about 55px short at 768 as a guest, and more with an absolute range. Without more rules, the time range painted 38px over Filters and Hunters 17px over Select target. So:
    • Hunters' wrapper does not shrink. It is one word.
    • The time range gives way first (flex-shrink:100, min-width:72px), on an ellipsis on #tr-label, as #sp-toggle already does. The clock icon does not shrink. The full range stays in the picker the button opens.
  • Measured at 768 as a guest: "Last 30 da…", 1 line, nothing overlaps. With an absolute range at 768: "2026-10-0…". At 840: "2026-10-01 10:00 → 2…". At 1280 nothing changes ("Last 30 days (ticker: 24 h)" in full).

Test

  • New e2e in barlayout.spec.js, run at every ONE_ROW viewport plus four with an absolute range (768 guest/member, 840, 900). It asserts that:
    • no text node of a bar control spans more than one line;
    • no button extends past its #bar-controls slot;
    • no item in #bar or #bar-controls overlaps the next one.
      It counts lines and edges, so the result does not depend on the runner's font.
  • Before the fix the test failed: first with hp-toggle, tr-toggle, auth-btn on two lines, then, with nowrap alone, with hp-toggle/tr-toggle outside their slot in 5 cases.
  • barlayout.spec.js: 55 passed. vitest 870/870, eslint clean.
  • Full Playwright locally: 334 passed, 2 failed:

Not done

  • Not checked on Linux fonts locally; CI runs that.
  • :has() is used to target Hunters' wrapper (Chrome 105, Safari 15.4, Firefox 121). In an older browser that rule is ignored and Hunters can shrink as on master.

🤖 Generated with Claude Code

https://claude.ai/code/session_01TDXX3ZV8LEdZgVTNFYFvZi

@efiten @claude
fix(web): keep the bar's labels on one line at tablet widths (#757)
08c8df5 
At 768 and 800px as a guest, Hunters, the time range and Log in broke
over two lines and grew the bar to 68px. nowrap on the three; the row
has the room for them.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TDXX3ZV8LEdZgVTNFYFvZi
@efiten efiten mentioned this pull request Oct 29, 2026
Merged
@efiten @claude
fix(web): let the time range give way on its own ellipsis instead of …
37ee144 
…overlapping (#757)

nowrap alone left the row about 55px short at 768 as a guest, so the
time range painted over Filters and Hunters over Select target. Hunters
keeps its width, the range shrinks first (flex-shrink 100, min 72px)
on an ellipsis, the clock icon does not shrink. The e2e now also fails
when a segment spills out of its slot, with an absolute range as input.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TDXX3ZV8LEdZgVTNFYFvZi
efiten added a commit that referenced this pull request Oct 31, 2026
@efiten @claude
fix(web): a callout with its control in the menu sends the tour copy …
8592da6 
…into the panel (#760)

Closes #758

## What changes
- `positionCallouts` (`web/onboarding.js`): a callout without a visible
target now sets `spotlight = false`, so the tour copy goes into the
panel. Before, it was skipped with `continue`, stayed visible at 0,0
over the bar, and did not count.
- Only the narrow layout changes: `#rx-cta` and `#auth-btn` are hidden
only below 768px (`web/style.css`, `web/barnarrow.js:41-42`). The
callouts at 768, 1100, 1280 and 1440 behave as before; the existing e2e
tests for those widths pass.

## Test
- New e2e `a callout whose control is in the menu sends the copy into
the panel`, at 700x1400. The window is tall enough that the filters box
fits below the panel on any font, so only the missing targets can switch
the copy. It failed before the fix (`#wb-inline` hidden).
- `onboarding.spec.js`: 18 passed, including `:167`, which failed
locally on master.
- vitest 870/870, eslint clean.
- Full Playwright locally: 325 passed, 1 failed
(`barlayout.spec.js:158`, fixed in #759).

## Merge note
#759 also adds a 2026-10-29 changelog entry, so after one of them
merges, the regenerated `app/changelog.json` and `web/changelog.json`
conflict. Fix: rerun `node scripts/build-changelog.mjs` on the merged
tree.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

https://claude.ai/code/session_01TDXX3ZV8LEdZgVTNFYFvZi

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
@efiten
Merge remote-tracking branch 'origin/master' into fix/auth-btn-one-line
f061a7f 
# Conflicts:
#	app/changelog.json
#	web/changelog.json
@efiten
efiten merged commit f27390c into master Oct 31, 2026
6 checks passed
@github-actions github-actions Bot mentioned this pull request Oct 31, 2026
Merged
@efiten efiten mentioned this pull request Oct 31, 2026
Merged
efiten added a commit that referenced this pull request Oct 31, 2026
@efiten @claude
fix(web): date a registry slice from when it was asked for (#765)
77badec 
Closes #764

## What changes
`createRowAttributor` (`web/rowattribution.js`):
- A slice gets `at: askedAt`, the moment it was asked for, instead of
`now()` after the answer. A slow answer then ages from the question.
- An answer whose `askedAt` is older than the current slice does not
replace it. That call still attributes its own rows with its own answer,
since the newer slice need not cover them (second commit, after review).

## Why
The flaky CI test `relaynames.spec.js:107` (on PR #762) comes down to
this:
- At boot the ticker renders before the role is known.
- `applyRole` resets the attributors and refetches (`web/map.js:610`,
`:679`).
- If that registry answer only lands after the test jumps the clock 66
s, the empty slice is stamped after the jump and counts as fresh for
another minute.

## Tests
- Three unit tests in `rowattribution.test.js`:
  - a slow answer that lands after the TTL is stale on the next ask;
  - a late older answer does not replace a newer slice;
- a late older answer still attributes its own rows outside the newer
slice.
All three failed without the fix (`called 1 times` / `rule: estimate`).
- A deterministic e2e probe that holds every empty registry answer until
after the clock jump: without the fix 1 of 3 runs failed, with the fix
12 of 12 passed. I did not add the probe as a permanent test; the unit
tests cover the rule.
- vitest 873/873, eslint clean, `relaynames.spec.js` 7/7.
- Full Playwright locally: 336 passed, 1 failed (`zoomfade.spec.js:90`).
That test does not touch the registry, and it also failed once in a full
run on the branch of #759 while passing 8 of 8 alone.

## Not done
- Left out of scope (pre-existing, from the review): an answer asked
before `reset()` that lands after it can still fill the slice, and a
late failed answer sets `failedAt` without comparing `askedAt`.
- The original flake rate is low: 2 of 40 locally, then 0 of 120. A rate
measurement before and after therefore proves little; the probe is the
evidence.
- No changelog entry. The effect for a reader (names up to a minute late
after a slow registry answer) occurs rarely and is not a feature.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

https://claude.ai/code/session_01TDXX3ZV8LEdZgVTNFYFvZi

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
efiten pushed a commit that referenced this pull request Oct 31, 2026
@github-actions
chore: release master (#756)
5bc0778 
🤖 I have created a release *beep* *boop*
---


<details><summary>app: 1.32.1</summary>

##
[1.32.1](app-v1.32.0...app-v1.32.1)
(2026-10-31)


### Bug Fixes

* **web:** a callout with its control in the menu sends the tour copy
into the panel
([#760](#760))
([8592da6](8592da6))
* **web:** keep the bar's labels on one line at tablet widths
([#759](#759))
([f27390c](f27390c))
</details>

<details><summary>server: 1.11.1</summary>

##
[1.11.1](server-v1.11.0...server-v1.11.1)
(2026-10-31)


### Performance Improvements

* **server,web:** one point query per hex refresh for both cell sizes
([#755](#755))
([78868fc](78868fc))
</details>

<details><summary>web: 1.28.1</summary>

##
[1.28.1](web-v1.28.0...web-v1.28.1)
(2026-10-31)


### Bug Fixes

* **web:** a callout with its control in the menu sends the tour copy
into the panel
([#760](#760))
([8592da6](8592da6))
* **web:** a registry answer from before a role change, or an older
failure, no longer moves the attributor
([#769](#769))
([087377d](087377d))
* **web:** date a registry slice from when it was asked for
([#765](#765))
([77badec](77badec))
* **web:** keep the bar's labels on one line at tablet widths
([#759](#759))
([f27390c](f27390c))


### Performance Improvements

* **server,web:** one point query per hex refresh for both cell sizes
([#755](#755))
([78868fc](78868fc))


### Code Refactoring

* **web:** drop the name-redraw hold, MapLibre never closes a popup on
redraw ([#770](#770))
([ba9a9b0](ba9a9b0))


### Tests

* **web:** release the mocked resolver when the popup is open, not after
600 ms ([#762](#762))
([2abc959](2abc959))
* **web:** retry the zoomfade hover until a painted cell answers
([#767](#767))
([9331dfa](9331dfa))
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

web: "Log in" wraps onto two lines in the bar at 768px

1 participant

@efiten