fix: consolidate drawer bottom safe-area padding#84
Open
conversun wants to merge 1 commit into
Open
Conversation
Move pb-[var(--safe-area-inset-bottom)] from the outer ResizablePanel shell into the inner contentRef wrapper so right/bottom drawers follow the same 'inner sticky-bottom component handles its own pb' pattern as the left Sidebar (SidebarFooter). Also fixes a latent bug: in docked mode contentRef is absolute inset-0 which fills the parent padding box, so an outer panel padding-bottom had no effect on inner content. Putting the padding directly on contentRef makes safe-area-bottom actually reduce the content area in both overlay and docked modes.
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
Cleans up the bottom safe-area padding handling on the right/bottom drawer overlays so they follow the same pattern as the left
Sidebar(inner sticky-bottom component handles its own pb), which is also the convention documented inindex.css:53-57.Changes
ResizablePanel.tsx: removed the inlinepaddingBottom: safeBottomInset(only set for right overlay) and the now-unusedsafeBottomInsetconstant. Addedpb-[var(--safe-area-inset-bottom)]to both the overlay and dockedcontentRefwrappers — the inner content surface now owns safe-area-bottom.RightPanel.tsx/BottomPanel.tsx: dropped theclassName=\"pb-[var(--safe-area-inset-bottom)]\"they were passing intoResizablePanel(no longer needed; ResizablePanel handles it internally).Sidebar.tsxuntouched —SidebarFooteralready handles its own pb correctly.Why
Previously the right drawer overlay had two sources of
padding-bottom: var(--safe-area-inset-bottom)on the same element (caller className + ResizablePanel inline style). Inline won, so it wasn't visually doubled, but it was redundant code with two owners.While moving the padding to the inner content wrapper, also fixed a latent docked-mode bug: in the docked branch
contentRefisabsolute inset-0, which fills the parent's padding box, not the content box. That meant the outerpb-[var(--safe-area-inset-bottom)]from RightPanel/BottomPanel had no effect on inner content positioning. Putting the padding directly oncontentRefmakes the safe area actually reduce content area in both overlay and docked modes.Validation
npm run validate(typecheck + lint + tests + build) passes.