fix(drawer): Match responsive header height on small screens (#113016)

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>

Author: 4 people

static/app/components/events/eventDrawer.tsx

@@ -1,3 +1,4 @@
+import type {ComponentPropsWithoutRef} from 'react';
 import styled from '@emotion/styled';
 
 import {InputGroup} from '@sentry/scraps/input';
@@ -6,6 +7,11 @@ import {Flex, type FlexProps} from '@sentry/scraps/layout';
 import {Breadcrumbs as NavigationBreadcrumbs} from 'sentry/components/breadcrumbs';
 import {DrawerBody, DrawerHeader} from 'sentry/components/globalDrawer/components';
 import {MIN_NAV_HEIGHT} from 'sentry/views/issueDetails/streamline/eventTitle';
+import {
+  NAVIGATION_MOBILE_TOPBAR_HEIGHT_WITH_PAGE_FRAME,
+  PRIMARY_HEADER_HEIGHT,
+} from 'sentry/views/navigation/constants';
+import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature';
 
 export const Header = styled('h3')`
   display: block;
@@ -31,16 +37,45 @@ export const ShortId = styled('div')`
   line-height: 1;
 `;
 
-export const EventDrawerContainer = styled('div')`
+const EventDrawerContainerRoot = styled('div')<{hasPageFrameFeature: boolean}>`
   height: 100%;
   display: grid;
   grid-template-rows: max-content max-content auto;
+
+  ${p =>
+    p.hasPageFrameFeature &&
+    `
+      /* Responsive height that matches the TopBar (48px mobile, 53px desktop) */
+      --event-drawer-header-height: ${NAVIGATION_MOBILE_TOPBAR_HEIGHT_WITH_PAGE_FRAME}px;
+      --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;
+      }
+    `}
 `;
 
+export function EventDrawerContainer(props: ComponentPropsWithoutRef<'div'>) {
+  const hasPageFrameFeature = useHasPageFrameFeature();
+
+  return (
+    <EventDrawerContainerRoot {...props} hasPageFrameFeature={hasPageFrameFeature} />
+  );
+}
+
 export const EventDrawerHeader = styled(DrawerHeader)`
   position: unset;
-  max-height: var(--drawer-header-height, ${MIN_NAV_HEIGHT}px);
-  min-height: var(--drawer-header-height, ${MIN_NAV_HEIGHT}px);
+  /* Height priority: container variable (responsive) → DrawerHeader height prop → default */
+  height: var(--event-drawer-header-height, var(--drawer-header-height, auto));
+  max-height: var(
+    --event-drawer-header-height,
+    var(--drawer-header-height, ${MIN_NAV_HEIGHT}px)
+  );
+  min-height: var(
+    --event-drawer-header-height,
+    var(--drawer-header-height, ${MIN_NAV_HEIGHT}px)
+  );
   align-items: center;
   box-shadow: none;
   border-bottom: 1px solid ${p => p.theme.tokens.border.primary};
@@ -54,12 +89,17 @@ export const EventNavigator = styled('div')`
   grid-template-columns: 1fr auto;
   align-items: center;
   column-gap: ${p => p.theme.space.md};
-  padding: ${p => p.theme.space.sm} 24px;
+  padding: 0 24px;
   background: ${p => p.theme.tokens.background.primary};
   z-index: 2; /* Just above EventStickyControls */
-  min-height: ${MIN_NAV_HEIGHT}px;
+  height: var(--event-drawer-header-height, auto);
+  min-height: var(--event-drawer-header-height, ${MIN_NAV_HEIGHT}px);
+  border-bottom: var(--event-navigator-border-bottom, 0);
   /* eslint-disable-next-line @sentry/scraps/use-semantic-token */
-  box-shadow: ${p => p.theme.tokens.border.primary} 0 1px;
+  box-shadow: var(
+    --event-navigator-box-shadow,
+    ${p => `${p.theme.tokens.border.primary} 0 1px`}
+  );
 `;
 
 export const EventStickyControls = styled('div')`