FIX dataset dropdown auto-resizes to fit long dataset names#630
Merged
Conversation
Replace the hardcoded 400px max-width on #dataopts and ul#datasets with width: max-content (capped at 90vw) and add white-space: nowrap to each list item. Long dataset names now display without ugly wrapping or truncation, while short names still render compactly. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Code Review
This pull request updates the CSS for the MRI viewer to improve layout responsiveness by replacing fixed pixel widths with dynamic values like max-content and viewport-based constraints. Feedback suggests explicitly setting overflow-x: hidden to prevent horizontal scrollbars when vertical scrolling is active and adding text-overflow: ellipsis to gracefully handle long dataset names that exceed the container width.
Even with the dropdown panel widening to fit long dataset names, the 24pt heading text could still exceed the 90vw panel cap and get clipped. Add fitDataname() to scale the heading font-size down (24pt → min 14px) when the rendered width exceeds 90vw, and call it after every #dataname update plus on window resize. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The 1s transition-delay + .3s all-property transition on #dataopts caused the dropdown panel to lag noticeably when its width changed (e.g. when selecting a dataset with a different name length). Removing the rule makes the panel snap to its new size immediately. The dataset list slide toggle is unaffected — that animation is driven by jQuery, not CSS. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- ul#datasets: add explicit overflow-x: hidden so the implicit auto promotion from overflow-y: auto cannot produce a horizontal scrollbar if the parent ever has to cap the list width. - ul#datasets li: add overflow: hidden and text-overflow: ellipsis so pathologically long names (e.g. on very narrow viewports) degrade gracefully with an ellipsis instead of overflowing the row. Verified at 800px viewport (all items fit, no ellipsis) and 350px viewport (longest two names show ellipsis as expected). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
Summary
max-width: 400px, so long dataset names wrapped onto multiple lines and looked ugly.width: max-content(capped at90vw) on#dataoptsandul#datasets, pluswhite-space: nowrapon each list item, so the dropdown auto-fits the longest dataset name and gracefully caps at the viewport width.Viewer.fitDataname()to auto-shrink the#datanameheading font-size when a long name would otherwise overflow the panel cap, so the heading still fits cleanly. Called after eachsetDataand on window resize.After
(Compare with the "before" screenshot in #628.)
Test plan
ul#datasets'sscrollWidth === clientWidth(no clipped horizontal overflow)#dataname.scrollWidth <= clientWidthfor long names (no clipped heading)🤖 Generated with Claude Code