style(replays): fix header placeholder size (#68030)

the header placeholders were the wrong size (too large), leading to some
movement when the data is loaded



https://github.com/getsentry/sentry/assets/56095982/61175206-cb5c-452e-9813-7f61cd2c56c0

Author: michellewzhang

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

@@ -79,7 +79,7 @@ function ReplayMetaData({replayErrors, replayRecord, showDeadRageClicks = true}:
         {replayRecord ? (
           <ErrorCounts replayErrors={replayErrors} replayRecord={replayRecord} />
         ) : (
-          <HeaderPlaceholder width="80px" height="16px" />
+          <HeaderPlaceholder width="20px" height="16px" />
         )}
       </KeyMetricData>
     </KeyMetrics>
@@ -89,7 +89,7 @@ function ReplayMetaData({replayErrors, replayRecord, showDeadRageClicks = true}:
 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;

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

@@ -121,7 +121,7 @@ export default function Page({
           hideEmail
         />
       ) : (
-        <HeaderPlaceholder width="100%" height="58px" />
+        <HeaderPlaceholder width="30%" height="45px" />
       )}
 
       <ReplayMetaData