From 7e8dae261217b761c943f3c10c92f79d3c8fffe8 Mon Sep 17 00:00:00 2001 From: jerryzhou196 Date: Wed, 26 Nov 2025 15:23:55 -0500 Subject: [PATCH 01/12] refactor(replays): Update replay header layout and styling - Removed unnecessary alignment property from KeyMetrics. - Introduced constants for navigation height and border styles in secondary navigation. - Refactored ReplayDetails header to use Flex layout for improved structure and styling consistency. - Updated header styles to utilize new constants for height and border, enhancing maintainability. --- .../replays/header/replayMetaData.tsx | 1 - static/app/views/nav/secondary/secondary.tsx | 8 ++-- static/app/views/replays/details.tsx | 40 +++++++++++++------ 3 files changed, 32 insertions(+), 17 deletions(-) diff --git a/static/app/components/replays/header/replayMetaData.tsx b/static/app/components/replays/header/replayMetaData.tsx index 4415b73ca6deb9..334ae5b254a1d5 100644 --- a/static/app/components/replays/header/replayMetaData.tsx +++ b/static/app/components/replays/header/replayMetaData.tsx @@ -116,7 +116,6 @@ const KeyMetrics = styled('dl')` grid-auto-flow: column; gap: 0 ${space(3)}; align-items: center; - align-self: end; color: ${p => p.theme.subText}; margin: 0; diff --git a/static/app/views/nav/secondary/secondary.tsx b/static/app/views/nav/secondary/secondary.tsx index df1e5b8b72f866..fb1d42e38db642 100644 --- a/static/app/views/nav/secondary/secondary.tsx +++ b/static/app/views/nav/secondary/secondary.tsx @@ -271,6 +271,9 @@ const Wrapper = styled('div')` grid-template-rows: auto 1fr auto; `; +export const NAV_HEIGHT = '44px'; +export const NAV_BORDER_BOTTOM = `1px solid`; + const Header = styled('div')` display: grid; grid-template-columns: 1fr auto; @@ -278,9 +281,8 @@ const Header = styled('div')` font-size: ${p => p.theme.fontSize.md}; font-weight: ${p => p.theme.fontWeight.bold}; padding: 0 ${space(1)} 0 ${space(2)}; - height: 44px; - border-bottom: 1px solid ${p => p.theme.innerBorder}; - + height: ${NAV_HEIGHT}; + border-bottom: ${NAV_BORDER_BOTTOM} ${p => p.theme.innerBorder}; button { color: inherit; } diff --git a/static/app/views/replays/details.tsx b/static/app/views/replays/details.tsx index eee7adeaf6bd5f..991d0f4eb0fb8b 100644 --- a/static/app/views/replays/details.tsx +++ b/static/app/views/replays/details.tsx @@ -3,8 +3,8 @@ import styled from '@emotion/styled'; import invariant from 'invariant'; import AnalyticsArea from 'sentry/components/analyticsArea'; +import {Flex} from 'sentry/components/core/layout'; import FullViewport from 'sentry/components/layouts/fullViewport'; -import * as Layout from 'sentry/components/layouts/thirds'; import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; @@ -17,6 +17,7 @@ import {useLocation} from 'sentry/utils/useLocation'; import useOrganization from 'sentry/utils/useOrganization'; import {useParams} from 'sentry/utils/useParams'; import {useUser} from 'sentry/utils/useUser'; +import {NAV_BORDER_BOTTOM, NAV_HEIGHT} from 'sentry/views/nav/secondary/secondary'; import ReplayDetailsProviders from 'sentry/views/replays/detail/body/replayDetailsProviders'; import ReplayDetailsHeaderActions from 'sentry/views/replays/detail/header/replayDetailsHeaderActions'; import ReplayDetailsMetadata from 'sentry/views/replays/detail/header/replayDetailsMetadata'; @@ -57,12 +58,16 @@ export default function ReplayDetails() { const content = ( -
- - - - -
+ +
+ + +
+ + + + + ); @@ -86,11 +91,20 @@ export default function ReplayDetails() { ); } -const Header = styled(Layout.Header)` +const Header = styled('div')` + padding-left: ${p => p.theme.space.lg}; + padding-right: ${p => p.theme.space.lg}; + border-bottom: ${NAV_BORDER_BOTTOM} ${p => p.theme.innerBorder}; + display: flex; + align-items: center; + justify-content: space-between; gap: ${space(1)}; - padding-bottom: ${space(1.5)}; - @media (min-width: ${p => p.theme.breakpoints.md}) { - gap: ${space(1)} ${space(3)}; - padding: ${space(2)} ${space(2)} ${space(1.5)} ${space(2)}; - } + flex-flow: row wrap; + height: ${NAV_HEIGHT}; + z-index: 1; +`; + +const StyledFlex = styled(Flex)` + padding: ${p => p.theme.space.lg}; + border-bottom: ${NAV_BORDER_BOTTOM} ${p => p.theme.innerBorder}; `; From ba2e5d7ea5b590a4f78fde06a593ce4cc0b66fe5 Mon Sep 17 00:00:00 2001 From: jerryzhou196 Date: Wed, 26 Nov 2025 15:55:27 -0500 Subject: [PATCH 02/12] refactor(replays): Enhance ReplayDetails component with new UI header - Introduced conditional rendering for the header based on organization features. - Replaced the existing header with a new styled component for improved layout. - Updated styling for the new header to align with design specifications. --- static/app/views/replays/details.tsx | 28 ++++++++++++++++++++++++---- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/static/app/views/replays/details.tsx b/static/app/views/replays/details.tsx index 991d0f4eb0fb8b..d23a7867e67a30 100644 --- a/static/app/views/replays/details.tsx +++ b/static/app/views/replays/details.tsx @@ -5,6 +5,7 @@ import invariant from 'invariant'; import AnalyticsArea from 'sentry/components/analyticsArea'; import {Flex} from 'sentry/components/core/layout'; import FullViewport from 'sentry/components/layouts/fullViewport'; +import * as Layout from 'sentry/components/layouts/thirds'; import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle'; import {t} from 'sentry/locale'; import {space} from 'sentry/styles/space'; @@ -56,13 +57,13 @@ export default function ReplayDetails() { ? `${replayRecord.user.display_name ?? t('Anonymous User')} — Session Replay — ${orgSlug}` : `Session Replay — ${orgSlug}`; - const content = ( + const content = organization.features.includes('replay-details-new-ui') ? ( -
+ -
+ @@ -70,6 +71,16 @@ export default function ReplayDetails() { + ) : ( + +
+ + + + +
+ + ); return ( @@ -91,7 +102,16 @@ export default function ReplayDetails() { ); } -const Header = styled('div')` +const Header = styled(Layout.Header)` + gap: ${space(1)}; + padding-bottom: ${space(1.5)}; + @media (min-width: ${p => p.theme.breakpoints.md}) { + gap: ${space(1)} ${space(3)}; + padding: ${space(2)} ${space(2)} ${space(1.5)} ${space(2)}; + } +`; + +const NewUIHeader = styled('div')` padding-left: ${p => p.theme.space.lg}; padding-right: ${p => p.theme.space.lg}; border-bottom: ${NAV_BORDER_BOTTOM} ${p => p.theme.innerBorder}; From 53570929c839135c55226a624fbf9e9af6fcc110 Mon Sep 17 00:00:00 2001 From: jerryzhou196 Date: Fri, 28 Nov 2025 14:15:29 -0500 Subject: [PATCH 03/12] refactor(platformList): Simplify styling and remove unused components - Consolidated common styles for platform icons and counters. - Removed InnerWrapper and Counter components to streamline the layout. - Updated styling to enhance hover effects and maintain consistent sizing for platform icons. --- .../app/components/core/avatar/avatarList.tsx | 1 - static/app/components/platformList.tsx | 48 ++++--------------- 2 files changed, 8 insertions(+), 41 deletions(-) diff --git a/static/app/components/core/avatar/avatarList.tsx b/static/app/components/core/avatar/avatarList.tsx index ef744c87d29a2f..efc49d37762e20 100644 --- a/static/app/components/core/avatar/avatarList.tsx +++ b/static/app/components/core/avatar/avatarList.tsx @@ -165,7 +165,6 @@ const AvatarListWrapper = styled('div')` const AvatarStyle = (p: {theme: Theme}) => css` border: 2px solid ${p.theme.background}; - margin-left: -8px; cursor: default; &:hover { diff --git a/static/app/components/platformList.tsx b/static/app/components/platformList.tsx index 8e8de327bbe080..84414b7a1e9b5e 100644 --- a/static/app/components/platformList.tsx +++ b/static/app/components/platformList.tsx @@ -1,4 +1,3 @@ -import type {Theme} from '@emotion/react'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; import {PlatformIcon} from 'platformicons'; @@ -62,41 +61,19 @@ function getOverlapWidth(size: number) { return Math.round(size / 4); } -const commonStyles = ({theme}: {theme: Theme}) => css` - cursor: default; - border-radius: ${theme.borderRadius}; - box-shadow: 0 0 0 1px ${theme.background}; - :hover { - z-index: 1; - } -`; - const PlatformIcons = styled('div')` display: flex; `; -const InnerWrapper = styled('div')` - display: flex; - position: relative; -`; - const StyledPlatformIcon = styled(PlatformIcon)` - ${p => commonStyles(p)}; -`; - -const Counter = styled('div')` - ${p => commonStyles(p)}; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - font-weight: ${p => p.theme.fontWeight.bold}; - font-size: ${p => p.theme.fontSize.xs}; - background-color: ${p => p.theme.gray200}; - color: ${p => p.theme.subText}; - padding: 0 1px; - position: absolute; - right: -1px; + cursor: default; + border-radius: ${p => p.theme.borderRadius}; + box-shadow: 0 0 0 1px ${p => p.theme.background}; + :hover { + z-index: 1; + } + height: ${p => p.size}px; + min-width: ${p => p.size}px; `; const Wrapper = styled('div')` @@ -111,13 +88,4 @@ const Wrapper = styled('div')` } `} } - - ${InnerWrapper} { - padding-right: ${p => p.size / 2 + 1}px; - } - - ${Counter} { - height: ${p => p.size}px; - min-width: ${p => p.size}px; - } `; From 378a7cda816315d335a3453a801e3878d07a8dbf Mon Sep 17 00:00:00 2001 From: jerryzhou196 Date: Fri, 28 Nov 2025 14:19:11 -0500 Subject: [PATCH 04/12] undo avatar list change --- static/app/components/core/avatar/avatarList.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/static/app/components/core/avatar/avatarList.tsx b/static/app/components/core/avatar/avatarList.tsx index efc49d37762e20..ef744c87d29a2f 100644 --- a/static/app/components/core/avatar/avatarList.tsx +++ b/static/app/components/core/avatar/avatarList.tsx @@ -165,6 +165,7 @@ const AvatarListWrapper = styled('div')` const AvatarStyle = (p: {theme: Theme}) => css` border: 2px solid ${p.theme.background}; + margin-left: -8px; cursor: default; &:hover { From 99fca14a36e6594ecb78f19c76793ed7b96a699c Mon Sep 17 00:00:00 2001 From: jerryzhou196 Date: Fri, 28 Nov 2025 14:25:18 -0500 Subject: [PATCH 05/12] refactor(replays): Simplify styled components and adjust layout in replay details - Removed unnecessary common styles and consolidated styling for platform icons and counters. - Updated font sizes and weights in replay metadata for better readability. - Adjusted placeholder dimensions in replay viewers and details user badge for consistency. - Enhanced layout in replay details metadata and breadcrumbs for improved visual hierarchy. --- .../replays/header/replayMetaData.tsx | 6 +- .../replays/header/replayViewers.tsx | 2 +- .../replays/table/replayTableColumns.tsx | 4 +- .../header/replayDetailsHeaderActions.tsx | 2 +- .../detail/header/replayDetailsMetadata.tsx | 7 +- .../header/replayDetailsPageBreadcrumbs.tsx | 2 + .../detail/header/replayDetailsUserBadge.tsx | 146 +++--------------- static/app/views/replays/details.tsx | 2 +- 8 files changed, 41 insertions(+), 130 deletions(-) diff --git a/static/app/components/replays/header/replayMetaData.tsx b/static/app/components/replays/header/replayMetaData.tsx index 4415b73ca6deb9..2f8c5f5b5d543c 100644 --- a/static/app/components/replays/header/replayMetaData.tsx +++ b/static/app/components/replays/header/replayMetaData.tsx @@ -126,12 +126,12 @@ const KeyMetrics = styled('dl')` `; const KeyMetricLabel = styled('dt')` - font-size: ${p => p.theme.fontSize.md}; + font-size: ${p => p.theme.fontSize.sm}; `; const KeyMetricData = styled('dd')` - font-size: ${p => p.theme.fontSize.xl}; - font-weight: ${p => p.theme.fontWeight.normal}; + font-size: ${p => p.theme.fontSize.md}; + font-weight: ${p => p.theme.fontWeight.bold}; display: flex; align-items: center; gap: ${space(1)}; diff --git a/static/app/components/replays/header/replayViewers.tsx b/static/app/components/replays/header/replayViewers.tsx index 7957949cbd8d3e..906ef3c9ca0652 100644 --- a/static/app/components/replays/header/replayViewers.tsx +++ b/static/app/components/replays/header/replayViewers.tsx @@ -29,7 +29,7 @@ export default function ReplayViewers({projectId, replayId}: Props) { }); return isPending || isError ? ( - + ) : ( ); diff --git a/static/app/components/replays/table/replayTableColumns.tsx b/static/app/components/replays/table/replayTableColumns.tsx index 80e34180825abe..592189bd01dbaa 100644 --- a/static/app/components/replays/table/replayTableColumns.tsx +++ b/static/app/components/replays/table/replayTableColumns.tsx @@ -56,6 +56,7 @@ interface CellProps { replay: ListRecord; rowIndex: number; showDropdownFilters: boolean; + className?: string; query?: Query; } @@ -511,7 +512,7 @@ export const ReplaySessionColumn: ReplayTableColumn = { interactive: true, sortKey: 'started_at', width: 'minmax(150px, 1fr)', - Component: ({replay, query}) => { + Component: ({replay, query, className}) => { const routes = useRoutes(); const referrer = getRouteStringFromRoutes(routes); @@ -538,6 +539,7 @@ export const ReplaySessionColumn: ReplayTableColumn = { return ( null} renderError={() => null} renderThrottled={() => null} - renderLoading={() => } + renderLoading={() => } renderMissing={() => null} renderProcessingError={({replayRecord, projectSlug}) => ( diff --git a/static/app/views/replays/detail/header/replayDetailsMetadata.tsx b/static/app/views/replays/detail/header/replayDetailsMetadata.tsx index 747fb52e1f68f9..17b5db40f3aada 100644 --- a/static/app/views/replays/detail/header/replayDetailsMetadata.tsx +++ b/static/app/views/replays/detail/header/replayDetailsMetadata.tsx @@ -1,3 +1,4 @@ +import {Flex} from 'sentry/components/core/layout'; import Placeholder from 'sentry/components/placeholder'; import ReplayMetaData from 'sentry/components/replays/header/replayMetaData'; import ReplayLoadingState from 'sentry/components/replays/player/replayLoadingState'; @@ -14,7 +15,11 @@ export default function ReplayDetailsMetadata({readerResult}: Props) { renderArchived={() => null} renderError={() => null} renderThrottled={() => null} - renderLoading={() => } + renderLoading={() => ( + + + + )} renderMissing={() => null} renderProcessingError={() => null} > diff --git a/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx b/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx index e7b192d582f953..6ce9430e319a88 100644 --- a/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx +++ b/static/app/views/replays/detail/header/replayDetailsPageBreadcrumbs.tsx @@ -186,6 +186,8 @@ export default function ReplayDetailsPageBreadcrumbs({readerResult}: Props) { const StyledBreadcrumbs = styled(Breadcrumbs)` padding: 0; + z-index: 1; + height: 34px; `; const ShortId = styled('div')` diff --git a/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx b/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx index dd1e201ffe1549..28d31683a8c299 100644 --- a/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx +++ b/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx @@ -1,25 +1,13 @@ import styled from '@emotion/styled'; -import {Flex} from '@sentry/scraps/layout'; -import {Text} from '@sentry/scraps/text'; -import {Tooltip} from '@sentry/scraps/tooltip'; - import {Button} from 'sentry/components/core/button'; -import {Link} from 'sentry/components/core/link'; -import UserBadge from 'sentry/components/idBadge/userBadge'; -import * as Layout from 'sentry/components/layouts/thirds'; +import {Flex} from 'sentry/components/core/layout'; import Placeholder from 'sentry/components/placeholder'; import ReplayLoadingState from 'sentry/components/replays/player/replayLoadingState'; -import { - getLiveDurationMs, - getReplayExpiresAtMs, - LIVE_TOOLTIP_MESSAGE, - LiveIndicator, -} from 'sentry/components/replays/replayLiveIndicator'; -import TimeSince from 'sentry/components/timeSince'; -import {IconCalendar, IconRefresh} from 'sentry/icons'; +import {getReplayExpiresAtMs} from 'sentry/components/replays/replayLiveIndicator'; +import {ReplaySessionColumn} from 'sentry/components/replays/table/replayTableColumns'; +import {IconRefresh} from 'sentry/icons'; import {t} from 'sentry/locale'; -import {space} from 'sentry/styles/space'; import {trackAnalytics} from 'sentry/utils/analytics'; import {useQueryClient} from 'sentry/utils/queryClient'; import type useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader'; @@ -27,12 +15,10 @@ import usePollReplayRecord from 'sentry/utils/replays/hooks/usePollReplayRecord' import {useReplayProjectSlug} from 'sentry/utils/replays/hooks/useReplayProjectSlug'; import useOrganization from 'sentry/utils/useOrganization'; import {useReplaySummaryContext} from 'sentry/views/replays/detail/ai/replaySummaryContext'; -import {makeReplaysPathname} from 'sentry/views/replays/pathnames'; interface Props { readerResult: ReturnType; } - export default function ReplayDetailsUserBadge({readerResult}: Props) { const organization = useOrganization(); const replayRecord = readerResult.replayRecord; @@ -41,28 +27,7 @@ export default function ReplayDetailsUserBadge({readerResult}: Props) { const replayId = readerResult.replayId; const queryClient = useQueryClient(); - - // Generate search query based on available user data - const getUserSearchQuery = () => { - if (!replayRecord?.user) { - return null; - } - - const user = replayRecord.user; - // Prefer email over id for search query - if (user.email) { - return `user.email:"${user.email}"`; - } - if (user.id) { - return `user.id:"${user.id}"`; - } - return null; - }; - - const searchQuery = getUserSearchQuery(); - const userDisplayName = replayRecord?.user.display_name || t('Anonymous User'); const projectSlug = useReplayProjectSlug({replayRecord}); - const {startSummaryRequest} = useReplaySummaryContext(); const handleRefresh = async () => { @@ -99,77 +64,24 @@ export default function ReplayDetailsUserBadge({readerResult}: Props) { const showRefreshButton = polledCountSegments > prevSegments; - const showLiveIndicator = - !isReplayExpired && replayRecord && getLiveDurationMs(replayRecord.finished_at) > 0; - const badge = replayRecord ? ( - - - {searchQuery ? ( - - {userDisplayName} - - ) : ( - userDisplayName - )} - - {replayRecord.started_at ? ( - - - - {showLiveIndicator ? ( - - - - {t('LIVE')} - - - - - ) : null} - - - ) : null} - - } - user={{ - name: replayRecord.user.display_name || '', - email: replayRecord.user.email || '', - username: replayRecord.user.username || '', - ip_address: replayRecord.user.ip || '', - id: replayRecord.user.id || '', - }} - hideEmail - /> + + + + ) : null; return ( @@ -179,7 +91,7 @@ export default function ReplayDetailsUserBadge({readerResult}: Props) { renderError={() => null} renderThrottled={() => null} renderLoading={() => - replayRecord ? badge : + replayRecord ? badge : } renderMissing={() => null} renderProcessingError={() => badge} @@ -189,16 +101,6 @@ export default function ReplayDetailsUserBadge({readerResult}: Props) { ); } -const TimeContainer = styled('div')` - display: flex; - gap: ${space(1)}; - align-items: center; - color: ${p => p.theme.subText}; - font-size: ${p => p.theme.fontSize.md}; - line-height: 1.4; -`; - -const DisplayHeader = styled('div')` - display: flex; - flex-direction: column; +const StyledReplaySessionColumn = styled(ReplaySessionColumn.Component)` + flex: 0; `; diff --git a/static/app/views/replays/details.tsx b/static/app/views/replays/details.tsx index eee7adeaf6bd5f..6a1f7a5b68c04f 100644 --- a/static/app/views/replays/details.tsx +++ b/static/app/views/replays/details.tsx @@ -91,6 +91,6 @@ const Header = styled(Layout.Header)` padding-bottom: ${space(1.5)}; @media (min-width: ${p => p.theme.breakpoints.md}) { gap: ${space(1)} ${space(3)}; - padding: ${space(2)} ${space(2)} ${space(1.5)} ${space(2)}; + padding: ${space(2)} ${space(1)} ${space(0.5)} ${space(2)}; } `; From 53ec39deb042d6cf4c68ed1a733c4ee75a803b96 Mon Sep 17 00:00:00 2001 From: jerryzhou196 Date: Fri, 28 Nov 2025 14:25:48 -0500 Subject: [PATCH 06/12] added platformList PR (https://github.com/getsentry/sentry/pull/104135) --- static/app/components/platformList.tsx | 48 +++++--------------------- 1 file changed, 8 insertions(+), 40 deletions(-) diff --git a/static/app/components/platformList.tsx b/static/app/components/platformList.tsx index 8e8de327bbe080..84414b7a1e9b5e 100644 --- a/static/app/components/platformList.tsx +++ b/static/app/components/platformList.tsx @@ -1,4 +1,3 @@ -import type {Theme} from '@emotion/react'; import {css} from '@emotion/react'; import styled from '@emotion/styled'; import {PlatformIcon} from 'platformicons'; @@ -62,41 +61,19 @@ function getOverlapWidth(size: number) { return Math.round(size / 4); } -const commonStyles = ({theme}: {theme: Theme}) => css` - cursor: default; - border-radius: ${theme.borderRadius}; - box-shadow: 0 0 0 1px ${theme.background}; - :hover { - z-index: 1; - } -`; - const PlatformIcons = styled('div')` display: flex; `; -const InnerWrapper = styled('div')` - display: flex; - position: relative; -`; - const StyledPlatformIcon = styled(PlatformIcon)` - ${p => commonStyles(p)}; -`; - -const Counter = styled('div')` - ${p => commonStyles(p)}; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - font-weight: ${p => p.theme.fontWeight.bold}; - font-size: ${p => p.theme.fontSize.xs}; - background-color: ${p => p.theme.gray200}; - color: ${p => p.theme.subText}; - padding: 0 1px; - position: absolute; - right: -1px; + cursor: default; + border-radius: ${p => p.theme.borderRadius}; + box-shadow: 0 0 0 1px ${p => p.theme.background}; + :hover { + z-index: 1; + } + height: ${p => p.size}px; + min-width: ${p => p.size}px; `; const Wrapper = styled('div')` @@ -111,13 +88,4 @@ const Wrapper = styled('div')` } `} } - - ${InnerWrapper} { - padding-right: ${p => p.size / 2 + 1}px; - } - - ${Counter} { - height: ${p => p.size}px; - min-width: ${p => p.size}px; - } `; From a564b505b26a41175cd62e862e22220b901bfd76 Mon Sep 17 00:00:00 2001 From: jerryzhou196 Date: Fri, 28 Nov 2025 14:26:21 -0500 Subject: [PATCH 07/12] removed unnecessary margin-left --- static/app/components/core/avatar/avatarList.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/static/app/components/core/avatar/avatarList.tsx b/static/app/components/core/avatar/avatarList.tsx index ef744c87d29a2f..efc49d37762e20 100644 --- a/static/app/components/core/avatar/avatarList.tsx +++ b/static/app/components/core/avatar/avatarList.tsx @@ -165,7 +165,6 @@ const AvatarListWrapper = styled('div')` const AvatarStyle = (p: {theme: Theme}) => css` border: 2px solid ${p.theme.background}; - margin-left: -8px; cursor: default; &:hover { From 57bfcdd2884cd554bfe3233ff9fd207c230a4bc4 Mon Sep 17 00:00:00 2001 From: jerryzhou196 Date: Fri, 28 Nov 2025 15:04:04 -0500 Subject: [PATCH 08/12] style(replays): Adjust height of KeyMetrics component for improved layout consistency --- static/app/components/replays/header/replayMetaData.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/static/app/components/replays/header/replayMetaData.tsx b/static/app/components/replays/header/replayMetaData.tsx index 2f8c5f5b5d543c..b678b001a09f73 100644 --- a/static/app/components/replays/header/replayMetaData.tsx +++ b/static/app/components/replays/header/replayMetaData.tsx @@ -114,6 +114,7 @@ const KeyMetrics = styled('dl')` grid-template-rows: max-content 1fr; grid-template-columns: repeat(4, max-content); grid-auto-flow: column; + height: 42px; gap: 0 ${space(3)}; align-items: center; align-self: end; From 781acf6c5d5c577337e99c4bcfc8b8f3d269a7fa Mon Sep 17 00:00:00 2001 From: jerryzhou196 Date: Fri, 28 Nov 2025 15:08:38 -0500 Subject: [PATCH 09/12] refactor(replays): Adjust padding in StyledFlex component for improved layout - Updated padding values in the StyledFlex component to enhance visual consistency and alignment with design specifications. --- static/app/views/replays/details.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/static/app/views/replays/details.tsx b/static/app/views/replays/details.tsx index d23a7867e67a30..43794b689536d9 100644 --- a/static/app/views/replays/details.tsx +++ b/static/app/views/replays/details.tsx @@ -125,6 +125,7 @@ const NewUIHeader = styled('div')` `; const StyledFlex = styled(Flex)` - padding: ${p => p.theme.space.lg}; + padding: ${p => p.theme.space.md} ${p => p.theme.space.lg} ${p => p.theme.space.md} + ${p => p.theme.space.lg}; border-bottom: ${NAV_BORDER_BOTTOM} ${p => p.theme.innerBorder}; `; From 8e9f79dfcb4d8742d5d250bb1ef1de3ab9682205 Mon Sep 17 00:00:00 2001 From: jerryzhou196 Date: Fri, 28 Nov 2025 15:29:25 -0500 Subject: [PATCH 10/12] removed z-index --- static/app/views/replays/details.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/static/app/views/replays/details.tsx b/static/app/views/replays/details.tsx index 43794b689536d9..aae4251efb183e 100644 --- a/static/app/views/replays/details.tsx +++ b/static/app/views/replays/details.tsx @@ -121,7 +121,6 @@ const NewUIHeader = styled('div')` gap: ${space(1)}; flex-flow: row wrap; height: ${NAV_HEIGHT}; - z-index: 1; `; const StyledFlex = styled(Flex)` From c860b824d6daa3885487394ca0d96e5485231347 Mon Sep 17 00:00:00 2001 From: jerryzhou196 Date: Fri, 28 Nov 2025 15:36:34 -0500 Subject: [PATCH 11/12] added query forwarding --- .../views/replays/detail/header/replayDetailsUserBadge.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx b/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx index 28d31683a8c299..d6851c5d25ae12 100644 --- a/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx +++ b/static/app/views/replays/detail/header/replayDetailsUserBadge.tsx @@ -13,6 +13,7 @@ import {useQueryClient} from 'sentry/utils/queryClient'; import type useLoadReplayReader from 'sentry/utils/replays/hooks/useLoadReplayReader'; import usePollReplayRecord from 'sentry/utils/replays/hooks/usePollReplayRecord'; import {useReplayProjectSlug} from 'sentry/utils/replays/hooks/useReplayProjectSlug'; +import {useLocation} from 'sentry/utils/useLocation'; import useOrganization from 'sentry/utils/useOrganization'; import {useReplaySummaryContext} from 'sentry/views/replays/detail/ai/replaySummaryContext'; @@ -64,6 +65,8 @@ export default function ReplayDetailsUserBadge({readerResult}: Props) { const showRefreshButton = polledCountSegments > prevSegments; + const location = useLocation(); + const badge = replayRecord ? ( - + ) : null; return ( @@ -105,6 +105,11 @@ export default function ReplayDetailsUserBadge({readerResult}: Props) { ); } +// column components expect to be stored in a relative container +const ColumnWrapper = styled(Flex)` + position: relative; +`; + const StyledReplaySessionColumn = styled(ReplaySessionColumn.Component)` flex: 0; `;