fix(drawer): Align drawer header with page frame header#112898
Merged
priscilawebdev merged 1 commit intomasterfrom Apr 14, 2026
Merged
fix(drawer): Align drawer header with page frame header#112898priscilawebdev merged 1 commit intomasterfrom
priscilawebdev merged 1 commit intomasterfrom
Conversation
When the page-frame feature is active, the TopBar is 53px tall. The drawer header was shorter (44px in EventDrawerHeader, ~36px in base DrawerHeader), causing a visible misalignment at the border. Set the drawer header height to match PRIMARY_HEADER_HEIGHT via a CSS custom property (--drawer-header-height) so both EventDrawerHeader and any styled(DrawerHeader) extensions pick up the correct value. When page-frame is inactive, all styles remain unchanged. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-actions
bot
added
the
Scope: Frontend
natemoo-re
approved these changes
Apr 14, 2026
Member
natemoo-re
left a comment
natemoo-re
left a comment
There was a problem hiding this comment.
Works for me! Will close #112852 if we merge this.
natemoo-re
added a commit
that referenced
this pull request
Apr 15, 2026
Follow-up to #112898. The page-frame event drawer used header sizing that no longer matched the page header on smaller viewports, which made the drawer chrome look visibly off around the activity and event drawers. Move the event drawer's responsive header sizing onto the shared event drawer container so the header row and navigator row inherit the same page-frame values. Keep the fixed-height navigator treatment scoped to page-frame drawers so non-page-frame drawers retain their previous spacing and shadow behavior. ## Before / After <table> <tr> <th>Before</th> <th>After</th> </tr> <tr> <td> <img width="1119" height="872" alt="image" src="https://github.com/user-attachments/assets/e7c99393-d05e-4a9f-a740-d55c62f706f8" /> </td> <td> <img width="1195" height="494" alt="image" src="https://github.com/user-attachments/assets/cfdaa498-1ced-4426-9178-0d1524c665f1" /> </td> </tr> </table> Closes https://linear.app/getsentry/issue/DE-1145/drawer-header-is-misaligned-with-the-other-header-on-smaller-devices --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com> Co-authored-by: OpenAI Codex <noreply@openai.com> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.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
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.
When the page-frame feature is active, the TopBar is 53px tall but
drawer headers were shorter — 44px for EventDrawerHeader, ~36px for
the base DrawerHeader. This caused a visible border misalignment
between the page header and the drawer header.
Sets the drawer header height to match
PRIMARY_HEADER_HEIGHTwhenpage-frame is enabled, using a CSS custom property
(
--drawer-header-height) so bothEventDrawerHeaderand anystyled(DrawerHeader)extensions pick up the correct valueautomatically. When page-frame is inactive, all styles remain
unchanged — the variable isn't set, and
EventDrawerHeaderfallsback to its original 44px via
var(--drawer-header-height, 44px).Before
After
closes https://linear.app/getsentry/issue/DE-1098/sidesheet-header-not-aligned-with-topbar-component