fix(drawer): Match responsive header height on small screens#113016
Merged
natemoo-re merged 12 commits intomasterfrom Apr 15, 2026
Merged
fix(drawer): Match responsive header height on small screens#113016natemoo-re merged 12 commits intomasterfrom
natemoo-re merged 12 commits intomasterfrom
Conversation
The drawer header was fixed at 53px (PRIMARY_HEADER_HEIGHT) when the page-frame feature is active, but the page TopBar shrinks to 48px on small screens. This caused a visible misalignment between the drawer header and the page header on mobile viewports. Add a mobileHeight prop to the Header styled component that overrides --drawer-header-height via a media query at the sm breakpoint, matching the TopBar's responsive behavior. EventDrawerHeader inherits the correct value automatically through the CSS variable. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
github-actions
bot
added
the
Scope: Frontend
Contributor
Sentry Snapshot Testing
|
Use useBreakpoints() to pick the correct header height at render time rather than adding a separate mobileHeight CSS prop with a media query. This is simpler and consistent with how the rest of the codebase handles responsive behavior. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Move the event drawer header sizing variables onto the shared event drawer container so the header row and navigator row can inherit the same responsive values. Keep the fixed-height navigator treatment behind the page-frame feature so non-page-frame drawers keep their previous spacing and shadow behavior. Co-Authored-By: OpenAI Codex <noreply@openai.com>
Define the shared drawer header sizing variables on the slide panel so all DrawerHeader consumers inherit the same page-frame sizing from a common ancestor. Keep the event drawer on its own scoped variable so its navigator alignment stays local and generic drawers no longer need header-level breakpoint logic. Co-Authored-By: Codex <noreply@openai.com>
Revert the shared global drawer header refactor and keep the page-frame alignment fix scoped to the event drawer. The event drawer already defines its own responsive header and navigator variables, so the shared drawer component does not need extra page-frame logic for this bug. Co-Authored-By: Codex <noreply@openai.com>
priscilawebdev
commented
Apr 15, 2026
Comment on lines
+48
to
+56
| --event-drawer-header-height: ${NAVIGATION_MOBILE_TOPBAR_HEIGHT_WITH_PAGE_FRAME}px; | ||
| --event-navigator-height: var(--event-drawer-header-height); | ||
| --event-navigator-min-height: var(--event-drawer-header-height); | ||
| --event-navigator-padding-block: 0px; | ||
| --event-navigator-box-shadow: none; | ||
| --event-navigator-border-bottom: 1px solid ${p.theme.tokens.border.primary}; | ||
|
|
||
| @media (min-width: ${p.theme.breakpoints.md}) { | ||
| --event-drawer-header-height: ${PRIMARY_HEADER_HEIGHT}px; |
Member
Author
There was a problem hiding this comment.
We can get rid most of these variables once the feature flag is removed
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 87b713c. Configure here.
Keep the non-page-frame drawer path on content-box sizing so its min-height still applies to the content area and the existing padding does not shrink the rendered row. Only use border-box when the page frame variables are active. Co-Authored-By: Codex <noreply@openai.com>
![sentry[bot]](https://avatars.githubusercontent.com/in/12637?s=60&v=4){kind=small}
EventDrawerHeader now falls back to --drawer-header-height (set by the base DrawerHeader) before the hardcoded MIN_NAV_HEIGHT default. This fixes a 9px misalignment in Insights panels that use EventDrawerHeader without an EventDrawerContainer wrapper when the page-frame feature is active. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Remove redundant --event-navigator-height and --event-navigator-min-height variables that were just aliases for --event-drawer-header-height. EventNavigator now references --event-drawer-header-height directly, making the shared height intent explicit. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
natemoo-re
reviewed
Apr 15, 2026
Member
natemoo-re
left a comment
natemoo-re
left a comment
There was a problem hiding this comment.
Looks good so far! Generally would prefer to take the opportunity to clean up the existing code rather than maintaining full backwards compatability.
Remove explicit box-sizing property since content-box is the default and there's no reason to set it. Remove vertical padding variable since align-items: center already handles vertical centering and the height is set explicitly. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.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.
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
Closes https://linear.app/getsentry/issue/DE-1145/drawer-header-is-misaligned-with-the-other-header-on-smaller-devices