feat(replays): further reduce header size

[jerryzhou196]

Related to REPLAY-814: Implement new UI for Replay Page

Depends on #104247

This updates the bottom bar to

• Reuse the ReplaySessionColumn
• Resizes placeholder spaces accordingly

Old:

New:

[codecov]

❌ 2 Tests Failed:

Tests completed	Failed	Passed	Skipped
12741	2	12739	10

View the top 2 failed test(s) by shortest run time

replayDetailsUserBadge should hide LIVE badge when last received segment is more than 5 minutes ago

Stack Traces | 0.054s run time

Error: expect(received).toBeVisible()

received value must be an HTMLElement or an SVGElement.
Received has value: null
    at __EXTERNAL_MATCHER_TRAP__ (.../sentry/node_modules/.pnpm/[email protected]..../expect/build/index.js:2237:22)
    at Object.throwingMatcher [as toBeVisible] (.../sentry/node_modules/.pnpm/[email protected]..../expect/build/index.js:2238:6)
    at Object.toBeVisible (.../detail/header/replayDetailsUserBadge.spec.tsx:305:48)

replayDetailsUserBadge should show LIVE badge when last received segment is within 5 minutes

Stack Traces | 0.07s run time

Error: expect(received).toBeVisible()

received value must be an HTMLElement or an SVGElement.
Received has value: null
    at __EXTERNAL_MATCHER_TRAP__ (.../sentry/node_modules/.pnpm/[email protected]..../expect/build/index.js:2237:22)
    at Object.throwingMatcher [as toBeVisible] (.../sentry/node_modules/.pnpm/[email protected]..../expect/build/index.js:2238:6)
    at Object.toBeVisible (.../detail/header/replayDetailsUserBadge.spec.tsx:238:48)

To view more test analytics, go to the Test Analytics Dashboard
_{📋 Got 3 mins? Take this short survey to help us improve Test Analytics.}

[linear]

REPLAY-814 Implement new UI for Replay Page

[michellewzhang]

with the new styling, it's less obvious that the header is a link (to the search) -- does this matter?

[jerryzhou196]

with the new styling, it's less obvious that the header is a link (to the search) -- does this matter?

@billyvg, thoughts?

[billyvg]

with the new styling, it's less obvious that the header is a link (to the search) -- does this matter?

@billyvg, thoughts?

Yeah I think that's fine, we will take what the standard components gives us (design wise)

[jerryzhou196]

@billyvg okay, instead of removing referrer_table, i added some logic to check if we're on the details page, and set it to 'details' instead of 'main':

code:

sentry/static/app/components/replays/table/replayTableColumns.tsx

Line 530 in aab9459

referrer_table: referrer === '/explore/replays/:replaySlug/' ? 'details' : 'main',