fix(ui): keep every tool-strip flyout inside the window - #338
Open
tsstod wants to merge 1 commit into
Open
Conversation
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>
|
@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. |
This was referenced Sep 11, 2026
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 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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:
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/2centres it on the strip, which is already centred in the window. Each panel's existing height cap then keeps it on screen.right-13replacesright-12because 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
AnimatePresenceblock out one level.Testing
Measured each panel's top and bottom edges in the browser (window 1280 wide):
Also checked:
Full
npx vitest runpasses on a local branch combining this PR with #334 and #337 on currentmaster(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
src/app/page.tsx, and the three merge cleanly together.right-13doesn't apply in a dev server that was already running, delete.next/and restart. Turbopack's dev cache kept serving CSS without the new class until then.🤖 Generated with Claude Code