Skip to content

fix(ui): drop the toast below the localize editor's top bar - #383

Merged
Chouffe merged 2 commits into
mainfrom
worktree-localize-toast-position
Aug 13, 2026
Merged

fix(ui): drop the toast below the localize editor's top bar#383
Chouffe merged 2 commits into
mainfrom
worktree-localize-toast-position

Conversation

@Chouffe

@Chouffe Chouffe commented Aug 13, 2026

Copy link
Copy Markdown
Collaborator

Accepting a box in the localize object editor raised a toast that landed on the editor's own top bar — squarely on the close button the reader reaches for next. The toast is pinned at top-4, 16px into a viewport whose top 48px the editor fills with its bar, and both anchor to the same right edge.

NotificationSystem grows a belowTopBar flag that drops it to top-16, clearing such a bar with the same 16px of air top-4 leaves against the viewport edge. LocalizeAlertPage sets it while either full-screen overlay is mounted — the object editor or the add-object overlay, which raises an identical bar (AddObjectOverlay.tsx:366).

The drop is deliberately not the app-wide default. With no overlay up, 64px is where the cockpit's own content starts: the rail card's header row carries the FP-toggle button at the same right edge (LocalizeRail.tsx:29-36, LocalizeAlertPage.tsx:2074), so an unconditional top-16 would trade a covered progress badge for a covered button. Conditioning on the overlay costs one prop and covers neither.

Verification

  • Component tests for both positions, plus two page-level tests pinning the wiring: a toast raised with the editor open sits at top-16, one raised from the alert page at top-4.
  • Both page tests mutation-checked — forcing the flag to false fails only the editor test, forcing it true fails only the alert-page test. Neither is vacuous.
  • Frontend suite: 1501 tests, 109 files, all passing. npm run type-check, npm run lint (--max-warnings 0), Prettier all clean.
  • Eyeballed against the test server's data via a worktree dev server, on /localize/6116/object/6116/100170.

The toast sat at top-4, 16px into a viewport whose top 48px the localize
object editor fills with its own bar — including the close button on the
same right edge the toast anchors to. Accepting a box covered the control
the reader was reaching for.

top-16 clears that bar with the same 16px breathing room the toast had
against the page edge before.
Moving the toast to top-16 app-wide traded one covered control for
another: with no overlay up, 64px is where the localize rail's own
header starts, and the toast landed on its FP toggle — a button, where
before it covered only the page header's progress badge.

So the drop is now conditional. The localize object editor and the
add-object overlay are the two things that pin a 48px bar across the
top, and the toast clears it exactly while one of them is mounted.
@Chouffe Chouffe changed the title fix(ui): drop the toast below a full-width top bar fix(ui): drop the toast below the localize editor's top bar Aug 13, 2026
@Chouffe
Chouffe merged commit f35c31a into main Aug 13, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant