fix(menu/viewer): tighten menu chevron spacing and stop 4D readout overlap#243
Merged
Conversation
The chevron sat ~24px from its label (10px label padding + 10px caret padding + 4px arrow margin), making it look detached from its setting. Add nv-topbtn-label / nv-topbtn-caret modifiers that trim the inner padding to 2px and drop the arrow's ms-1 margin, so the chevron hugs the label while the normal spacing after the chevron is preserved. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
🚀 PWA Preview DeploymentYour PWA preview has been deployed! Preview URL: https://niivue.github.io/niivue-vscode/pr-243/ This preview will be updated automatically when you push new commits to this PR. |
Contributor
Coverage ReportOverall line coverage: 38.3% (−2.9) vs
|
The POS/VAL readout and the 4D navigator both anchored to the bottom- right of the pane, so on a 4D volume they overlapped. Lift the readout to bottom:48px (above the ~40px nav bar) and stack the two vertically when the navigator is shown. Stacking keeps both bars right-aligned and full- width safe on narrow tiles, where neither fits beside the other on one edge. 3D panes are unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
korbinian90
changed the title
Resolves the readout/4D-navigator/timeseries-graph pile-up in the bottom- right corner of each pane: - Move the POS/VAL readout to the bottom-left, clear of the 4D navigator and the graph NiiVue draws in the bottom-right quadrant. - Turn the 4D navigator into a thin vertical column (+ / frame / - / play / sync) so it barely intrudes on the graph and leaves the bottom edge free for the readout on narrow tiles. - Fix the voxel value width: integers print verbatim while floats show 5 significant figures without trimming trailing zeros, so the readout no longer jumps between "15.533" and "15.54" (stays "15.540"). Supersedes the earlier bottom-right vertical-stacking approach. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Contributor
🧹 PWA Preview CleanupThe preview deployment for this PR has been removed. |
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
1 participant
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.
Menu-bar and 4D-viewer layout fixes.
1. Tighten the gap between a menu label and its dropdown chevron
A
MenuItem(andImageSelect) renders the label and the chevron as two separatenv-topbtnbuttons. The visible gap between them was ~24px, built from the label button's10pxright padding, the caret button's10pxleft padding, and the arrow SVG's ownms-1(4px) margin — so each chevron looked detached from its label, while the space after the chevron was the normal10px..nv-topbtn-label(padding-right: 2px) and.nv-topbtn-caret(padding-left: 2px) inMenu.css, applied to the label/caret pair inMenuItemandImageSelect.ms-1margin.Net: the gap before the chevron drops from ~24px to ~4px (short), while the gap after stays at the normal 10px.
2. Stop the readout, the 4D navigator and the timeseries graph from overlapping
On a 4D volume the
POS … VAL …readout, the 4D navigator, and the timeseries graph NiiVue draws (autoSizeMultiplanar, View → Time Series) all piled into the bottom-right corner of each pane.+ / frame / − / play / sync) in the bottom-right, so it occupies minimal horizontal space (only clips the graph's far-right edge) and leaves the bottom edge free for the readout even on narrow tiles.1044); floats show 5 significant figures without trimming trailing zeros, so the readout no longer jitters between15.533and15.54as the crosshair moves (it stays15.540).Notes for reviewers
menu-item-dropdown-<label>,intensity-<index>,volume-play/sync/input-<index>).MenuButton/MenuToggleare unaffected.@niivue/reacttype-check and unit tests (85) pass.🤖 Generated with Claude Code