fix(media): Tags panel on viewports wider than 1920px (#1587)#1592
Conversation
The home-rolled useBreakpointIndex returned -1 above 1920px, which force-hid the Tags panel. Switch Items to @sanity/ui's useMediaIndex, which includes a min-width catch-all and matches Controls breakpoints.
🦋 Changeset detectedLatest commit: 84a2a13 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Fixes an ultra-wide viewport bug in sanity-plugin-media where the Tags panel toggle could never open on viewports wider than 1920px due to a custom breakpoint hook returning -1.
Changes:
- Replaced the custom
useBreakpointIndexlogic inItemswith@sanity/ui’suseMediaIndexto correctly handle wide viewports. - Removed the unused home-rolled
useBreakpointIndexhook implementation. - Added a patch changeset for
sanity-plugin-mediadocumenting the fix.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
plugins/sanity-plugin-media/src/components/Items/index.tsx |
Switches responsive logic to useMediaIndex so the Tags panel is not force-hidden on ultra-wide viewports. |
plugins/sanity-plugin-media/src/hooks/useBreakpointIndex.ts |
Removes the now-unused custom breakpoint hook that could return -1 on very wide screens. |
.changeset/media-tags-panel-wide-viewport.md |
Adds a patch changeset describing the Tags panel fix for wide viewports. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
pedrobonamin
left a comment
pedrobonamin
left a comment
There was a problem hiding this comment.
Nice fix, thank you!
Fixes #1587
Problem
On viewports wider than 1920 CSS px, the Tags panel toggle appeared dead. The home-rolled
useBreakpointIndexbuiltmax-widthqueries from themecontainerwidths and usedfindIndex, which returns-1when nothing matches.Itemsthen treated-1 <= 1as a small screen and immediately force-hid the panel.The toolbar toggle stayed visible because
Controlsalready uses@sanity/ui's responsivedisplay/useMediaIndex, which handle wide viewports correctly.Fix
useBreakpointIndexinItemswithuseMediaIndexfrom@sanity/ui(same hook already used inControls,TableRowAsset, etc.)useMediaIndexincludes amin-widthcatch-all for the widest bucket, so ultra-wide viewports get the largest index instead of-1, and it uses thememediabreakpoints consistent with the rest of the plugin.Verification
pnpm --filter sanity-plugin-media build— passpnpm --filter sanity-plugin-media exec vitest run— 149 tests passpnpm knip— passpnpm lint -- plugins/sanity-plugin-media/src/components/Items/index.tsx— pass