fix(media-library): remove scrollbar from empty media panel - #7
Merged
Merged
Conversation
The empty and loading states were padded with py-24 (192px), making them taller than a short docked panel, so the unconditional overflow-y-auto container always showed a scrollbar with nothing meaningful to scroll. Make the scroll container a flex column and let MediaGrid's empty and loading states fill the available height (flex-1 + m-auto centering) instead of pushing past it, and compact the empty state (smaller upload circle, tighter spacing) so it fits the panel at the default editor layout. m-auto keeps the content reachable by scrolling on panels shorter than the content itself, avoiding the justify-center overflow clipping problem. The grouped-usage grid branch and [scrollbar-gutter:stable] are untouched, so scrolling with imported media behaves as before.
MeepCastana
approved these changes
Aug 6, 2026
MeepCastana
left a comment
MeepCastana
left a comment
Collaborator
There was a problem hiding this comment.
Reviewed locally on a combined review branch (all six merged clean, no conflicts). CI green. Approved.
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.
Fixes #5
What
The media panel showed a vertical scrollbar when the library was empty: the
py-24(192px) padding on the empty and loading states made them taller than a short docked panel, and the scroll container appliesoverflow-y-autounconditionally.How
media-library.tsx: the scroll container becomes a flex column (flex flex-coladded; siblings inside it use paddings only, so no margin-collapse differences).media-grid.tsx: the root grows to fill the column (flex-1 min-h-0 flex flex-col— inert in the grouped usage, whose parent is a blockCollapsibleContent), and the empty/loading states switch from fixedpy-24toflex-1withm-autocentering.m-auto(instead ofjustify-center) keeps content reachable by scrolling if the panel is ever shorter than the content, avoiding the classic flex-centering clip.[scrollbar-gutter:stable]is kept, per the issue.Verification
Measured in headless Chromium against the dev server (fresh project, empty library):
m-autokeeps it fully reachableThe empty state stays vertically centered and fully visible at the default layout. Below ~210px of panel height the (compact) content is taller than the panel, so a scrollbar appears because there is real content to scroll — consistent with the issue's principle.
The populated-library path is untouched: same scroll container, grid branch unchanged. I could not drive a real media import headlessly (import uses
showOpenFilePicker/ file-system handles, which synthetic drag-drop can't provide), so that path is covered by reasoning + the existing unit tests rather than a browser measurement.Checks
lint✅,check:boundaries✅,check:deps-contracts✅,check:legacy-lib-imports✅test:run: all 1259 tests pass; the only failing suite iseditor.test.tsx, which also fails on an unmodified checkout ofmainin environments without Supabase env vars (its logger mock lackswarn, andsrc/infrastructure/supabase/client.ts:32callslogger.warnat import time). Unrelated to this change — happy to fix in a separate one-line PR.