Revert "feat(replays): Replay layout move start time (#58488)"

This reverts commit 13f2e6b.

Co-authored-by: asottile-sentry <[email protected]>

Author: getsentry-bot

static/app/components/replays/header/replayMetaData.tsx

@@ -3,8 +3,7 @@ import styled from '@emotion/styled';
 
 import ErrorCounts from 'sentry/components/replays/header/errorCounts';
 import HeaderPlaceholder from 'sentry/components/replays/header/headerPlaceholder';
-import TimeSince from 'sentry/components/timeSince';
-import {IconCalendar, IconCursorArrow} from 'sentry/icons';
+import {IconCursorArrow} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import EventView from 'sentry/utils/discover/eventView';
@@ -38,22 +37,6 @@ function ReplayMetaData({replayErrors, replayRecord}: Props) {
 
   return (
     <KeyMetrics>
-      <KeyMetricLabel>{t('Start Time')}</KeyMetricLabel>
-      <KeyMetricData>
-        {replayRecord ? (
-          <TimeContainer>
-            <IconCalendar color="gray300" size="sm" />
-            <TimeSince
-              date={replayRecord.started_at}
-              isTooltipHoverable
-              unitStyle="regular"
-            />
-          </TimeContainer>
-        ) : (
-          <HeaderPlaceholder width="80px" height="16px" />
-        )}
-      </KeyMetricData>
-
       <KeyMetricLabel>{t('Dead Clicks')}</KeyMetricLabel>
       <KeyMetricData>
         {replayRecord?.count_dead_clicks ? (
@@ -97,7 +80,7 @@ function ReplayMetaData({replayErrors, replayRecord}: Props) {
 const KeyMetrics = styled('dl')`
   display: grid;
   grid-template-rows: max-content 1fr;
-  grid-template-columns: repeat(5, max-content);
+  grid-template-columns: repeat(4, max-content);
   grid-auto-flow: column;
   gap: 0 ${space(3)};
   align-items: center;
@@ -134,10 +117,4 @@ const ClickCount = styled(Count)<{color: ColorOrAlias}>`
   align-items: center;
 `;
 
-const TimeContainer = styled('div')`
-  display: flex;
-  gap: ${space(1)};
-  align-items: center;
-`;
-
 export default ReplayMetaData;

static/app/views/replays/detail/page.tsx

@@ -11,6 +11,8 @@ import HeaderPlaceholder from 'sentry/components/replays/header/headerPlaceholde
 import ReplayMetaData from 'sentry/components/replays/header/replayMetaData';
 import ShareButton from 'sentry/components/replays/shareButton';
 import SentryDocumentTitle from 'sentry/components/sentryDocumentTitle';
+import TimeSince from 'sentry/components/timeSince';
+import {IconCalendar} from 'sentry/icons';
 import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {ReplayError, ReplayRecord} from 'sentry/views/replays/types';
@@ -59,7 +61,23 @@ function Page({children, orgSlug, replayRecord, projectSlug, replayErrors}: Prop
             ip_address: replayRecord.user.ip || '',
             id: replayRecord.user.id || '',
           }}
-          hideEmail
+          // this is the subheading for the avatar, so displayEmail in this case is a misnomer
+          displayEmail={
+            <div>
+              {replayRecord ? (
+                <TimeContainer>
+                  <IconCalendar color="gray300" size="xs" />
+                  <StyledTimeSince
+                    date={replayRecord.started_at}
+                    isTooltipHoverable
+                    unitStyle="regular"
+                  />
+                </TimeContainer>
+              ) : (
+                <HeaderPlaceholder width="80px" height="16px" />
+              )}
+            </div>
+          }
         />
       ) : (
         <HeaderPlaceholder width="100%" height="58px" />
@@ -98,4 +116,14 @@ const ButtonActionsWrapper = styled(Layout.HeaderActions)`
   }
 `;
 
+const TimeContainer = styled('div')`
+  display: flex;
+  gap: ${space(0.5)};
+  align-items: center;
+`;
+
+const StyledTimeSince = styled(TimeSince)`
+  font-size: ${p => p.theme.fontSizeMedium};
+`;
+
 export default Page;