fix(issues): Clean up tags drawer header (#117777)

scttcper · web-flow · commit f95e68b45d00 · 2026-06-16T10:22:34.000-07:00
goal was to fix some style issues in the tag drawer in dark mode. Swapped alernating backgrounds for hover state. Also moves the tags and feature flag drawer controls into the drawer header so the body doesn't get that weird extra padding at the top. before <img width="1248" height="924" alt="image" src="https://github.com/user-attachments/assets/2caf174b-af32-4c71-9eb5-d742135fa288" /> after (yes is hovered) <img width="1244" height="892" alt="image" src="https://github.com/user-attachments/assets/52c03784-3261-4dcf-b623-5e894a119923" />
diff --git a/static/app/components/events/eventDrawer.tsx b/static/app/components/events/eventDrawer.tsx
@@ -16,6 +16,11 @@ import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFea
 
 export const Header = styled('h3')`
   display: block;
+  min-width: 0;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-size: ${p => p.theme.font.size.xl};
   font-weight: ${p => p.theme.font.weight.sans.medium};
   margin: 0;
@@ -103,22 +108,6 @@ export const EventNavigator = styled('div')`
   );
 `;
 
-export const EventStickyControls = styled('div')`
-  display: flex;
-  justify-content: space-between;
-  gap: ${p => p.theme.space.md};
-  position: sticky;
-  top: -${p => p.theme.space.xl};
-  margin-block: -${p => p.theme.space.xl};
-  padding-block: ${p => p.theme.space.xl};
-  background: ${p => p.theme.tokens.background.primary};
-  z-index: 1; /* Just below EventNavigator */
-
-  /* Make this full-width inside DrawerBody */
-  margin-inline: -24px;
-  padding-inline: 24px;
-`;
-
 export const EventDrawerBody = styled(DrawerBody)`
   overflow: auto;
   overscroll-behavior: contain;
diff --git a/static/app/views/issueDetails/groupDistributions/flagsDistributionDrawer.tsx b/static/app/views/issueDetails/groupDistributions/flagsDistributionDrawer.tsx
@@ -6,17 +6,16 @@ import {AnalyticsArea} from 'sentry/components/analyticsArea';
 import {
   EventDrawerBody,
   EventNavigator,
-  EventStickyControls,
+  Header,
 } from 'sentry/components/events/eventDrawer';
 import {FeatureFlagSort} from 'sentry/components/events/featureFlags/featureFlagSort';
 import {OrderBy} from 'sentry/components/events/featureFlags/utils';
-import {t} from 'sentry/locale';
+import {t, tct} from 'sentry/locale';
 import type {Group} from 'sentry/types/group';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useParams} from 'sentry/utils/useParams';
 import {GroupDistributionsSearchInput} from 'sentry/views/issueDetails/groupDistributions/groupDistributionsSearchInput';
-import {HeaderTitle} from 'sentry/views/issueDetails/groupDistributions/headerTitle';
 import {TagFlagPicker} from 'sentry/views/issueDetails/groupDistributions/tagFlagPicker';
 import {DrawerTab} from 'sentry/views/issueDetails/groupDistributions/types';
 import {FlagDetailsDrawerContent} from 'sentry/views/issueDetails/groupFeatureFlags/details/flagDetailsDrawerContent';
@@ -50,45 +49,41 @@ export function FlagsDistributionDrawer({group, organization, setTab}: Props) {
   return (
     <Fragment>
       <EventNavigator>
-        <HeaderTitle
-          tagKey={tagKey}
-          tab={DrawerTab.FEATURE_FLAGS}
-          includeFeatureFlagsTab
-        />
-      </EventNavigator>
-      <EventDrawerBody>
+        <Header>
+          {tagKey
+            ? tct('Feature Flag Details - [tagKey]', {tagKey})
+            : t('Tags & Feature Flags')}
+        </Header>
         {tagKey ? null : (
-          <EventStickyControls>
+          <Grid flow="column" align="center" gap="md" marginLeft="auto">
             <TagFlagPicker setTab={setTab} tab={DrawerTab.FEATURE_FLAGS} />
+            <GroupDistributionsSearchInput
+              includeFeatureFlagsTab
+              search={search}
+              onChange={value => {
+                setSearch(value);
+                trackAnalytics('tags.drawer.action', {
+                  control: 'search',
+                  organization,
+                });
+              }}
+            />
 
-            <Grid flow="column" align="center" gap="md">
-              <GroupDistributionsSearchInput
-                includeFeatureFlagsTab
-                search={search}
-                onChange={value => {
-                  setSearch(value);
-                  trackAnalytics('tags.drawer.action', {
-                    control: 'search',
-                    organization,
-                  });
-                }}
-              />
-
-              <FeatureFlagSort
-                orderBy={orderBy}
-                setOrderBy={value => {
-                  setOrderBy(value);
-                  trackAnalytics('flags.sort_flags', {
-                    organization,
-                    sortMethod: value as string,
-                  });
-                }}
-                orderByOptions={orderByOptions}
-              />
-            </Grid>
-          </EventStickyControls>
+            <FeatureFlagSort
+              orderBy={orderBy}
+              setOrderBy={value => {
+                setOrderBy(value);
+                trackAnalytics('flags.sort_flags', {
+                  organization,
+                  sortMethod: value as string,
+                });
+              }}
+              orderByOptions={orderByOptions}
+            />
+          </Grid>
         )}
-
+      </EventNavigator>
+      <EventDrawerBody>
         {tagKey ? (
           <AnalyticsArea name="feature_flag_details">
             <FlagDetailsDrawerContent group={group} />
diff --git a/static/app/views/issueDetails/groupDistributions/headerTitle.tsx b/static/app/views/issueDetails/groupDistributions/headerTitle.tsx
diff --git a/static/app/views/issueDetails/groupDistributions/tagsDistributionDrawer.tsx b/static/app/views/issueDetails/groupDistributions/tagsDistributionDrawer.tsx
@@ -7,16 +7,16 @@ import {Tooltip} from '@sentry/scraps/tooltip';
 import {
   EventDrawerBody,
   EventNavigator,
-  EventStickyControls,
+  Header,
 } from 'sentry/components/events/eventDrawer';
 import {IconSort} from 'sentry/icons';
+import {t, tct} from 'sentry/locale';
 import type {Group} from 'sentry/types/group';
 import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 import {useParams} from 'sentry/utils/useParams';
 import {GroupDistributionsSearchInput} from 'sentry/views/issueDetails/groupDistributions/groupDistributionsSearchInput';
-import {HeaderTitle} from 'sentry/views/issueDetails/groupDistributions/headerTitle';
 import {TagExportDropdown} from 'sentry/views/issueDetails/groupDistributions/tagExportDropdown';
 import {TagFlagPicker} from 'sentry/views/issueDetails/groupDistributions/tagFlagPicker';
 import {DrawerTab} from 'sentry/views/issueDetails/groupDistributions/types';
@@ -47,11 +47,13 @@ export function TagsDistributionDrawer({
   return (
     <Fragment>
       <EventNavigator>
-        <HeaderTitle
-          tagKey={tagKey}
-          tab={DrawerTab.TAGS}
-          includeFeatureFlagsTab={includeFeatureFlagsTab}
-        />
+        <Header>
+          {tagKey
+            ? tct('Tag Details - [tagKey]', {tagKey})
+            : includeFeatureFlagsTab
+              ? t('Tags & Feature Flags')
+              : t('All Tags')}
+        </Header>
 
         {tagKey ? (
           <TagExportDropdown
@@ -60,40 +62,31 @@ export function TagsDistributionDrawer({
             group={group}
             tagKey={tagKey}
           />
-        ) : null}
-      </EventNavigator>
-      <EventDrawerBody>
-        {tagKey ? null : (
-          <EventStickyControls>
+        ) : (
+          <Grid flow="column" align="center" gap="md" marginLeft="auto">
             {includeFeatureFlagsTab ? (
               <TagFlagPicker setTab={setTab} tab={DrawerTab.TAGS} />
-            ) : (
-              <div />
-            )}
-
-            <Grid flow="column" align="center" gap="md">
-              <GroupDistributionsSearchInput
-                includeFeatureFlagsTab={includeFeatureFlagsTab}
-                search={search}
-                onChange={value => {
-                  setSearch(value);
-                  trackAnalytics('tags.drawer.action', {
-                    control: 'search',
-                    organization,
-                  });
-                }}
-              />
-              {includeFeatureFlagsTab ? (
-                <Fragment>
-                  <Tooltip title="Highlighted tags are shown first">
-                    <Button aria-label="" disabled size="xs" icon={<IconSort />} />
-                  </Tooltip>
-                </Fragment>
-              ) : null}
-            </Grid>
-          </EventStickyControls>
+            ) : null}
+            <GroupDistributionsSearchInput
+              includeFeatureFlagsTab={includeFeatureFlagsTab}
+              search={search}
+              onChange={value => {
+                setSearch(value);
+                trackAnalytics('tags.drawer.action', {
+                  control: 'search',
+                  organization,
+                });
+              }}
+            />
+            {includeFeatureFlagsTab ? (
+              <Tooltip title="Highlighted tags are shown first">
+                <Button aria-label="" disabled size="xs" icon={<IconSort />} />
+              </Tooltip>
+            ) : null}
+          </Grid>
         )}
-
+      </EventNavigator>
+      <EventDrawerBody>
         {tagKey ? (
           <TagDetailsDrawerContent group={group} />
         ) : (
diff --git a/static/app/views/issueDetails/groupTags/tagDetailsDrawerContent.tsx b/static/app/views/issueDetails/groupTags/tagDetailsDrawerContent.tsx
@@ -395,10 +395,10 @@ const Header = styled(Body)`
 
 const Row = styled(Body)`
   &:nth-child(even) {
-    background: ${p => p.theme.tokens.background.secondary};
+    background: ${p => p.theme.tokens.background.tertiary};
   }
   align-items: center;
-  border-radius: 4px;
+  border-radius: ${p => p.theme.radius.md};
   padding: ${p => p.theme.space['2xs']} ${p => p.theme.space.md};
 
   .invisible {
diff --git a/static/app/views/issueDetails/groupTags/tagDistribution.tsx b/static/app/views/issueDetails/groupTags/tagDistribution.tsx
@@ -147,17 +147,20 @@ const TagValueContent = styled('div')`
   grid-template-columns: 4fr auto ${progressBarWidth};
   color: ${p => p.theme.tokens.content.secondary};
   grid-column-gap: ${p => p.theme.space.md};
-
-  & > :nth-child(2n) {
-    background-color: ${p => p.theme.tokens.background.secondary};
-  }
 `;
 
 const TagValueRow = styled('div')`
   display: grid;
   grid-column: 1 / -1;
   grid-template-columns: subgrid;
   align-items: center;
+  padding: 0 ${p => p.theme.space.sm};
+  margin: 0 -${p => p.theme.space.sm};
+  border-radius: ${p => p.theme.radius.md};
+
+  &:hover {
+    background-color: ${p => p.theme.tokens.background.tertiary};
+  }
 `;
 
 const TagValue = styled('div')`
