From cb539cdc403c352dd42cfa71315ebd0320a3ef81 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Thu, 21 May 2026 10:59:53 -0400 Subject: [PATCH 1/6] ci: retrigger CI From fff9fb566ea5ef1bf74025be486c9632200f41f4 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Thu, 21 May 2026 10:59:53 -0400 Subject: [PATCH 2/6] ci: retrigger CI From 5d2347aa8c14509887cf8e33999a5dc6de8d0df9 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Thu, 21 May 2026 10:59:53 -0400 Subject: [PATCH 3/6] ci: retrigger CI From 5d8a033cccc5041e0707d4b74c878991dbf0761e Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Thu, 21 May 2026 10:59:53 -0400 Subject: [PATCH 4/6] ci: retrigger CI From 00bfb17f14bca2e4d5a33abcf46b506225f51372 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Wed, 20 May 2026 17:53:32 -0400 Subject: [PATCH 5/6] =?UTF-8?q?ref(=F0=9F=A5=9E):=20replace=20local=20z-in?= =?UTF-8?q?dex=20theme=20refs=20with=20bare=20z-index:=201?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit theme.zIndex.initial, header, and truncationFullValue are replaced with bare z-index: 1. Within a Layer stacking context, 1 is sufficient for local overrides like sticky headers and hover states. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../forms/fields/segmentedRadioField.tsx | 2 +- .../infiniteList/infiniteListItems.tsx | 2 +- static/app/components/panels/panelTable.tsx | 2 +- .../flamegraphOverlays/FlamegraphWarnings.tsx | 2 +- .../breadcrumbs/replayTimelineEvents.tsx | 2 +- .../replays/player/bufferingOverlay.tsx | 2 +- .../replays/player/fastForwardBadge.tsx | 2 +- .../components/replays/player/scrubber.tsx | 2 +- .../replays/table/replayTableHeader.tsx | 2 +- .../virtualizedGrid/detailsSplitDivider.tsx | 4 ++-- static/app/components/truncate.tsx | 2 +- .../components/workflowEngine/ui/footer.tsx | 2 +- .../app/debug/notifications/views/index.tsx | 2 +- static/app/stories/view/index.tsx | 4 ++-- static/app/stories/view/storySearch.tsx | 2 +- .../app/views/admin/installWizard/index.tsx | 2 +- .../forms/common/schedulePreview.tsx | 2 +- static/app/views/discover/miniGraph.tsx | 2 +- .../app/views/explore/components/styles.tsx | 2 +- .../replays/detail/network/details/tabs.tsx | 2 +- .../issueDetails/streamline/eventDetails.tsx | 2 +- .../streamline/eventListTable.tsx | 2 +- .../traceTimeline/traceTimelineEvents.tsx | 2 +- static/app/views/issueList/actions/index.tsx | 2 +- .../views/projectsDashboard/projectChart.tsx | 2 +- .../settings/components/settingsHeader.tsx | 22 +++++++++++++++++++ 26 files changed, 49 insertions(+), 27 deletions(-) create mode 100644 static/app/views/settings/components/settingsHeader.tsx diff --git a/static/app/components/forms/fields/segmentedRadioField.tsx b/static/app/components/forms/fields/segmentedRadioField.tsx index 988bf358614af1..02b1965ab2ab0b 100644 --- a/static/app/components/forms/fields/segmentedRadioField.tsx +++ b/static/app/components/forms/fields/segmentedRadioField.tsx @@ -125,7 +125,7 @@ const RadioItem = styled('label', {shouldForwardProp})<{ &[aria-checked='true'] { border-color: ${p => p.theme.tokens.border.accent.vibrant} !important; box-shadow: inset 0 0 0 1px ${p => p.theme.tokens.focus.default}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } &:first-child { diff --git a/static/app/components/infiniteList/infiniteListItems.tsx b/static/app/components/infiniteList/infiniteListItems.tsx index bfc92c7c125246..a697134247db8d 100644 --- a/static/app/components/infiniteList/infiniteListItems.tsx +++ b/static/app/components/infiniteList/infiniteListItems.tsx @@ -153,7 +153,7 @@ const PositionedList = styled('ul')` const Footer = styled('footer')` position: absolute; bottom: 0; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; display: flex; width: 100%; flex-grow: 1; diff --git a/static/app/components/panels/panelTable.tsx b/static/app/components/panels/panelTable.tsx index 28eb677b19991e..af922f1bcfb209 100644 --- a/static/app/components/panels/panelTable.tsx +++ b/static/app/components/panels/panelTable.tsx @@ -193,7 +193,7 @@ const PanelTableHeader = styled('div')<{sticky: boolean}>` css` position: sticky; top: 0; - z-index: ${p.theme.zIndex.initial}; + z-index: 1; `} `; diff --git a/static/app/components/profiling/flamegraph/flamegraphOverlays/FlamegraphWarnings.tsx b/static/app/components/profiling/flamegraph/flamegraphOverlays/FlamegraphWarnings.tsx index 617b932510d5b5..6d828bd858d43c 100644 --- a/static/app/components/profiling/flamegraph/flamegraphOverlays/FlamegraphWarnings.tsx +++ b/static/app/components/profiling/flamegraph/flamegraphOverlays/FlamegraphWarnings.tsx @@ -106,6 +106,6 @@ const Overlay = styled('div')` grid: auto/50%; gap: ${p => p.theme.space.md}; place-content: center; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; text-align: center; `; diff --git a/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx b/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx index ea4cf55fca9d04..0c0f0aba8b430f 100644 --- a/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx +++ b/static/app/components/replays/breadcrumbs/replayTimelineEvents.tsx @@ -61,7 +61,7 @@ const EventColumn = styled(Timeline.Col)` position: relative; &:hover { - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } `; diff --git a/static/app/components/replays/player/bufferingOverlay.tsx b/static/app/components/replays/player/bufferingOverlay.tsx index 720d2a03f4cbe8..0e63bfa4b5a96d 100644 --- a/static/app/components/replays/player/bufferingOverlay.tsx +++ b/static/app/components/replays/player/bufferingOverlay.tsx @@ -36,5 +36,5 @@ const Message = styled('div')` background: ${p => p.theme.colors.gray400}; border-radius: ${p => p.theme.radius.md}; color: ${p => p.theme.colors.white}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; `; diff --git a/static/app/components/replays/player/fastForwardBadge.tsx b/static/app/components/replays/player/fastForwardBadge.tsx index 7e023f679c1d22..ed6e5364122311 100644 --- a/static/app/components/replays/player/fastForwardBadge.tsx +++ b/static/app/components/replays/player/fastForwardBadge.tsx @@ -35,7 +35,7 @@ const FastForwardTooltip = styled(Tooltip)` color: ${p => p.theme.colors.white}; padding: ${p => p.theme.space.lg} ${p => p.theme.space.xl}; border-top-right-radius: ${p => p.theme.radius.md}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; `; const StyledIconArrow = styled(IconArrow)` diff --git a/static/app/components/replays/player/scrubber.tsx b/static/app/components/replays/player/scrubber.tsx index e32d892763b97e..83e5ea26699c51 100644 --- a/static/app/components/replays/player/scrubber.tsx +++ b/static/app/components/replays/player/scrubber.tsx @@ -199,6 +199,6 @@ export const PlayerScrubber = styled(Scrubber)` top: 0; right: calc((var(--size) + (var(--borderWidth) * 2)) / 2 * -1); translate: 0 calc(-50% + var(--borderWidth)); - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } `; diff --git a/static/app/components/replays/table/replayTableHeader.tsx b/static/app/components/replays/table/replayTableHeader.tsx index 7ab58f6c3b420b..8e9e6e412eb73c 100644 --- a/static/app/components/replays/table/replayTableHeader.tsx +++ b/static/app/components/replays/table/replayTableHeader.tsx @@ -137,7 +137,7 @@ export function ReplayTableHeader({ const TableHeader = styled(SimpleTable.Header)` grid-row: 1; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; height: min-content; `; diff --git a/static/app/components/replays/virtualizedGrid/detailsSplitDivider.tsx b/static/app/components/replays/virtualizedGrid/detailsSplitDivider.tsx index 31491819f3ad05..bdb69c3e5ec599 100644 --- a/static/app/components/replays/virtualizedGrid/detailsSplitDivider.tsx +++ b/static/app/components/replays/virtualizedGrid/detailsSplitDivider.tsx @@ -57,7 +57,7 @@ const CloseButtonWrapper = styled('div')` right: 0; height: 100%; padding: ${p => p.theme.space.md}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; display: flex; align-items: center; `; @@ -65,6 +65,6 @@ const CloseButtonWrapper = styled('div')` const StyledSplitDivider = styled(SplitDivider)` :hover, &[data-is-held='true'] { - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } `; diff --git a/static/app/components/truncate.tsx b/static/app/components/truncate.tsx index 5d1480edb14529..3b74f50a34ae7e 100644 --- a/static/app/components/truncate.tsx +++ b/static/app/components/truncate.tsx @@ -109,7 +109,7 @@ const FullValue = styled('span')<{ ${p => p.expanded && css` - z-index: ${p.theme.zIndex.truncationFullValue}; + z-index: 1; display: block; `} `; diff --git a/static/app/components/workflowEngine/ui/footer.tsx b/static/app/components/workflowEngine/ui/footer.tsx index 754da9bb761a55..f7b666c21e5c79 100644 --- a/static/app/components/workflowEngine/ui/footer.tsx +++ b/static/app/components/workflowEngine/ui/footer.tsx @@ -19,7 +19,7 @@ const StickyFooterBase = styled('div', { box-shadow: none; justify-content: flex-end; gap: ${p => p.theme.space.lg}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; &[data-stuck] { /* TODO(design-engineering): Replace with a directional shadow token when one exists */ diff --git a/static/app/debug/notifications/views/index.tsx b/static/app/debug/notifications/views/index.tsx index 43d0e30b9c3ab9..062e57db8b585f 100644 --- a/static/app/debug/notifications/views/index.tsx +++ b/static/app/debug/notifications/views/index.tsx @@ -88,7 +88,7 @@ const HeaderContainer = styled('header')` top: 0; left: 0; right: 0; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; background: ${p => p.theme.tokens.background.primary}; `; diff --git a/static/app/stories/view/index.tsx b/static/app/stories/view/index.tsx index 4c89f17e36ca83..7fee59cbc01df8 100644 --- a/static/app/stories/view/index.tsx +++ b/static/app/stories/view/index.tsx @@ -222,7 +222,7 @@ function GlobalStoryStyles() { .messages-container { margin-top: 52px; margin-left: 256px; - z-index: ${theme.zIndex.header}; + z-index: 1; background: ${theme.tokens.background.primary}; } `; @@ -250,7 +250,7 @@ const HeaderContainer = styled('header')` top: 0; left: 0; right: 0; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; background: ${p => p.theme.tokens.background.primary}; `; diff --git a/static/app/stories/view/storySearch.tsx b/static/app/stories/view/storySearch.tsx index 22631dfa31f73b..56602cb5aa43ce 100644 --- a/static/app/stories/view/storySearch.tsx +++ b/static/app/stories/view/storySearch.tsx @@ -286,7 +286,7 @@ const StorySearchContainer = styled('div')` position: relative; width: 320px; flex-grow: 1; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; margin-left: -${p => p.theme.space.xl}; `; diff --git a/static/app/views/admin/installWizard/index.tsx b/static/app/views/admin/installWizard/index.tsx index 018a0814453d15..24eed99cb3f4db 100644 --- a/static/app/views/admin/installWizard/index.tsx +++ b/static/app/views/admin/installWizard/index.tsx @@ -189,5 +189,5 @@ const SetupWizard = styled('div')` padding: 40px 40px 20px; max-width: 1000px; margin: ${p => p.theme.space['2xl']}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; `; diff --git a/static/app/views/detectors/components/forms/common/schedulePreview.tsx b/static/app/views/detectors/components/forms/common/schedulePreview.tsx index 98db16e3da7807..456d0304e0db16 100644 --- a/static/app/views/detectors/components/forms/common/schedulePreview.tsx +++ b/static/app/views/detectors/components/forms/common/schedulePreview.tsx @@ -308,7 +308,7 @@ const OpenPeriodCountLabel = styled('div')` const StyledContainer = styled(Container)` top: 8px; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; /* * Prevent seeing content beneath in the uncovered strip above the sticky element. * Use a solid, zero-blur shadow so we don't paint over the border. diff --git a/static/app/views/discover/miniGraph.tsx b/static/app/views/discover/miniGraph.tsx index 72f77c05b41d13..7790d10cbbfb06 100644 --- a/static/app/views/discover/miniGraph.tsx +++ b/static/app/views/discover/miniGraph.tsx @@ -245,7 +245,7 @@ class MiniGraph extends Component { splitLine: { show: false, }, - zlevel: theme.zIndex.header, + zlevel: 1, }, tooltip: { show: false, diff --git a/static/app/views/explore/components/styles.tsx b/static/app/views/explore/components/styles.tsx index 4ae435fddd6b36..b839a7d6733ff8 100644 --- a/static/app/views/explore/components/styles.tsx +++ b/static/app/views/explore/components/styles.tsx @@ -67,7 +67,7 @@ export const ExploreBodySearch = styled(Layout.Body)` position: sticky; top: var(${TOP_BAR_HEIGHT_CSS_VAR}, 0px); - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; background-color: ${p => p.theme.tokens.background.primary}; border-bottom: 1px solid ${p => p.theme.tokens.border.primary}; diff --git a/static/app/views/explore/replays/detail/network/details/tabs.tsx b/static/app/views/explore/replays/detail/network/details/tabs.tsx index c247a2676937bd..d065e804fa2016 100644 --- a/static/app/views/explore/replays/detail/network/details/tabs.tsx +++ b/static/app/views/explore/replays/detail/network/details/tabs.tsx @@ -50,7 +50,7 @@ export const StyledNetworkDetailsTabs = styled(NetworkDetailsTabs)` margin-right: 0; padding-right: ${p => p.theme.space['2xl']}; background: ${p => p.theme.tokens.background.primary}; - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } & > li:first-child { padding-left: ${p => p.theme.space.xl}; diff --git a/static/app/views/issueDetails/streamline/eventDetails.tsx b/static/app/views/issueDetails/streamline/eventDetails.tsx index 0fc4773f06675a..74fd41533a120d 100644 --- a/static/app/views/issueDetails/streamline/eventDetails.tsx +++ b/static/app/views/issueDetails/streamline/eventDetails.tsx @@ -69,7 +69,7 @@ function StickyEventNav({event, group}: {event: Event; group: Group}) { const FloatingEventNavigation = styled(Sticky)` background: ${p => p.theme.tokens.background.primary}; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; border-radius: ${p => p.theme.radius.md} ${p => p.theme.radius.md} 0 0; &[data-stuck] { diff --git a/static/app/views/issueDetails/streamline/eventListTable.tsx b/static/app/views/issueDetails/streamline/eventListTable.tsx index bbbe0087b5f431..a30c34ef8cd32b 100644 --- a/static/app/views/issueDetails/streamline/eventListTable.tsx +++ b/static/app/views/issueDetails/streamline/eventListTable.tsx @@ -147,7 +147,7 @@ export const Header = styled('div')` border-bottom: 1px solid ${p => p.theme.tokens.border.transparent.neutral.muted}; position: sticky; top: 0; - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; border-radius: ${p => p.theme.radius.md} ${p => p.theme.radius.md} 0 0; `; diff --git a/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx b/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx index 0e5a425de53a3c..37f37f8599e748 100644 --- a/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx +++ b/static/app/views/issueDetails/traceTimeline/traceTimelineEvents.tsx @@ -213,7 +213,7 @@ const EventColumn = styled('div')` position: relative; &:hover { - z-index: ${p => p.theme.zIndex.initial}; + z-index: 1; } `; diff --git a/static/app/views/issueList/actions/index.tsx b/static/app/views/issueList/actions/index.tsx index d6bddef84c9c49..835ed6d0e7f623 100644 --- a/static/app/views/issueList/actions/index.tsx +++ b/static/app/views/issueList/actions/index.tsx @@ -365,7 +365,7 @@ function shouldConfirm( } const StickyActions = styled(Sticky)` - z-index: ${p => p.theme.zIndex.header}; + z-index: 1; /* Remove border radius from the action bar when stuck. Without this there is * a small gap where color can peek through. */ diff --git a/static/app/views/projectsDashboard/projectChart.tsx b/static/app/views/projectsDashboard/projectChart.tsx index 800aeb860d5444..f80cf7f897ff3b 100644 --- a/static/app/views/projectsDashboard/projectChart.tsx +++ b/static/app/views/projectsDashboard/projectChart.tsx @@ -173,7 +173,7 @@ export function ProjectChart({ splitLine: { show: false, }, - zlevel: theme.zIndex.header, + zlevel: 1, })), axisPointer: { // Link each x-axis together. diff --git a/static/app/views/settings/components/settingsHeader.tsx b/static/app/views/settings/components/settingsHeader.tsx new file mode 100644 index 00000000000000..639137c962ba48 --- /dev/null +++ b/static/app/views/settings/components/settingsHeader.tsx @@ -0,0 +1,22 @@ +import styled from '@emotion/styled'; + +import {Container, type ContainerProps} from '@sentry/scraps/layout'; + +import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature'; + +export const SettingsHeader = styled((props: ContainerProps) => { + const hasPageFrame = useHasPageFrameFeature(); + + return ( + + ); +})``; From c93560abf1e78143e42eca32b7c6aa4b0c3b51f1 Mon Sep 17 00:00:00 2001 From: Nate Moore Date: Tue, 26 May 2026 13:26:55 -0400 Subject: [PATCH 6/6] =?UTF-8?q?fix(=F0=9F=A5=9E):=20remove=20resurrected?= =?UTF-8?q?=20settingsHeader.tsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit File was deleted on master (refactored). Rebase conflict resolution accidentally re-created it. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../settings/components/settingsHeader.tsx | 22 ------------------- 1 file changed, 22 deletions(-) delete mode 100644 static/app/views/settings/components/settingsHeader.tsx diff --git a/static/app/views/settings/components/settingsHeader.tsx b/static/app/views/settings/components/settingsHeader.tsx deleted file mode 100644 index 639137c962ba48..00000000000000 --- a/static/app/views/settings/components/settingsHeader.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import styled from '@emotion/styled'; - -import {Container, type ContainerProps} from '@sentry/scraps/layout'; - -import {useHasPageFrameFeature} from 'sentry/views/navigation/useHasPageFrameFeature'; - -export const SettingsHeader = styled((props: ContainerProps) => { - const hasPageFrame = useHasPageFrameFeature(); - - return ( - - ); -})``;