Fix mobile layouts for active dataset banner and CV Manager modal#119
Merged
Conversation
…dataset banner - Section reorder pill no longer scales up while dragged, so the dashed placeholder and the floating pill share the same height. - CV Manager modal wraps at ≤640px so dataset name, LOAD, radio and ⋮ stay on the first row; secondary metadata (editing/make-public/url/date) wraps underneath. Group header actions collapse to icon-only. - Active dataset banner wraps at ≤640px: name on row 1, badges stacked below, variants on their own row. Add-language becomes icon-only and the "Switch other variants" label is dropped. https://claude.ai/code/session_014ZA2dkMwzKxszFUnDX4kDJ
…(768 px) The new CVM-modal / active-dataset-banner stacking rules now trigger at the same breakpoint as the existing hamburger-menu and banner-padding overrides, instead of one tier below. https://claude.ai/code/session_014ZA2dkMwzKxszFUnDX4kDJ
The ≤768 px mobile block now hides URL, last-modified date, the MAKE PUBLIC shortcut (redundant with the radio), and the EDITING / DEFAULT pills (the row background + border-left accent already convey state). All of these remain reachable through the ⋮ menu, which already exposes Copy URL, Preview, Change language and Delete. Also drop the stray @media (max-width: 420px) block — keeping a single 768 px breakpoint across the modal is more consistent than tiering. Redundant "Existing CVs" subtitle is also dropped on mobile; the modal title already labels the section. https://claude.ai/code/session_014ZA2dkMwzKxszFUnDX4kDJ
The last commit collapsed the row to a single line by hiding everything non-essential. Spec is "optimise / hide what's non-essential", not "single-line row" — metadata (EDITING / DEFAULT / PUBLIC or MAKE PUBLIC / URL / last-modified date) should still be visible, just stacked on a second line beneath the name. Row 1 keeps the action essentials (radio, lang, version, name, LOAD, ⋮); row 2 carries the state + metadata. https://claude.ai/code/session_014ZA2dkMwzKxszFUnDX4kDJ
…pping The icon-only add-language button on phones read as a bare + with no hint that it opens a language picker. Add a second material icon (language / globe) so the button is "+ 🌐" on phones while desktop still shows "+ Add language" (the globe is hidden on desktop). Also fix the clipped dropdown: when the button sits near the right edge of the variants row, the existing right:0 anchor made the 200 px dropdown overflow off the left edge of a 375 px viewport. On phones we unpin .dataset-add-lang-wrapper and let the dropdown anchor to the fixed banner with left:12 / right:12, so it spans the viewport width cleanly. https://claude.ai/code/session_014ZA2dkMwzKxszFUnDX4kDJ
…CV:" The verb "Switch" was redundant — the chips next to the label are clearly clickable alternatives. Shortening makes the desktop label land in one line more often and matches the mobile layout (where the label is hidden anyway). All eight locale files updated. https://claude.ai/code/session_014ZA2dkMwzKxszFUnDX4kDJ
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
2 participants
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.
Description
This PR fixes responsive layout issues on mobile devices for two key UI components:
Active dataset banner (portrait mode): The dataset name now occupies its own row, with version/language/public-status badges stacking underneath. The language variants row appears below. The "+ Add language" button collapses to icon-only and the "Switch other variants" label is hidden on narrow screens.
CV Manager modal (phones): Restructured to guarantee the dataset name, LOAD button, radio button, and menu fit on the first row at iPhone widths. Secondary metadata (badges, URL, date) wraps to a second row. The date is hidden below 420px. Group header buttons ("+ New version", "Add language") collapse to icon-only on mobile.
Section reorder overlay: Fixed the dashed placeholder to match the height of the floating pill. Removed the
scale(1.04)transform during drag so the slot it leaves behind aligns with where it returns.Type of Change
Checklist
Required for all code changes
package.json,package-lock.json,version.json)CHANGELOG.mdhas been updated with a new entry under the correct versionIf adding or changing user-visible strings
Test Plan
Verify on mobile devices (iPhone SE / 375px width and below):
https://claude.ai/code/session_014ZA2dkMwzKxszFUnDX4kDJ