Skip to content

fix(ui): keep every tool-strip flyout inside the window - #338

Open
tsstod wants to merge 1 commit into
simplifaisoul:masterfrom
tsstod:fix/tool-strip-flyouts
Open

fix(ui): keep every tool-strip flyout inside the window#338
tsstod wants to merge 1 commit into
simplifaisoul:masterfrom
tsstod:fix/tool-strip-flyouts

Conversation

@tsstod

@tsstod tsstod commented Sep 11, 2026

Copy link
Copy Markdown

Summary

Each panel on the right-hand tool strip was centred vertically on its own button, so panels near the ends of the strip spilled out of the window on laptop-height screens. At 1280×720:

  • the RECON toolkit started 59px above the top, hiding its header along with the full-screen and collapse controls, which could not be scrolled back into view
  • Markets started 39px above the top
  • ArcGIS and World Remote ran 4px and 59px past the bottom (30px and 109px at 600px tall), sliding under the news ticker

Anchoring each panel to the top or bottom of its button can't fix this: Markets is 86% of the window height.

Change

Every flyout is now a child of the strip itself rather than of its button's wrapper, so top-1/2 -translate-y-1/2 centres it on the strip, which is already centred in the window. Each panel's existing height cap then keeps it on screen.

right-13 replaces right-12 because the containing block no longer includes the strip's 4px padding. The gap between panel and strip stays at 11px.

Most of the diff is re-indentation from moving each AnimatePresence block out one level.

Testing

Measured each panel's top and bottom edges in the browser (window 1280 wide):

Panel 600 tall 720 tall 1000 tall
RECON 60–540 110–610 (was −59 top) 250–750
Space fits fits 351–649
Markets 34–566 (was −55 top) 34–686 (was −39 top) 162–838
Alerts 60–540 110–610 250–750
Search 281–319 341–379 481–519
ArcGIS 90–510 (was 630 bottom) 124–596 (was 724 bottom) 264–736
World Remote 60–540 (was 709 bottom) 110–610 (was 779 bottom) 250–750

Also checked:

  • the hover labels still line up with their buttons
  • the strip's own layout is unchanged (the RECON button stays at y=175 at 720)
  • the gap to the strip is 11px for every panel, as before

Full npx vitest run passes on a local branch combining this PR with #334 and #337 on current master (8781ae3): 49 test files passed, 614 tests passed. The 2 skipped files and 16 skipped tests are pre-existing skips of the network-gated tests. This is a layout change, so there is no unit test for it; the measurements above are the check.

Notes

🤖 Generated with Claude Code

Each flyout on the right tool strip was a child of its button's wrapper
and centred on that button, so panels near the ends of the strip spilled
past the window on laptop-height screens. Measured at 1280x720: the RECON
toolkit started 59px above the top, hiding its header along with the
full-screen and collapse controls; Markets started 39px above; ArcGIS and
World Remote ran 4px and 59px past the bottom (30px and 109px at 600
tall). Anchoring each panel to the top or bottom of its own button cannot
fix this, because Markets is 86% of the window height.

Make every flyout a child of the strip itself, so top-1/2 centres it on
the strip, which is already centred in the window. right-13 replaces
right-12 because the containing block no longer includes the strip's 4px
padding; the gap to the strip stays at 11px.

Measured in the browser at 600, 720 and 1000px tall: all seven flyouts
(RECON, Space, Markets, Alerts, Search, ArcGIS, World Remote) fit, with
the tooltips still aligned to their buttons and the strip itself
unchanged. Most of the diff is re-indentation from moving each
AnimatePresence block out one level.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@vercel

vercel Bot commented Sep 11, 2026

Copy link
Copy Markdown

@tsstod is attempting to deploy a commit to the Developing Osiris' projects Team on Vercel.

A member of the Team first needs to authorize it.

@tsstod

tsstod commented Sep 11, 2026

Copy link
Copy Markdown
Author

The red Vercel – osiris check here is Vercel waiting for a team member to authorize a deploy from a fork. No build has run, so here's a local one instead:

🤖 Generated with Claude Code

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