fix(replays): computing styles on every tick instead inline style.width (#47034)

## Summary
Emotion was recomputing styles since we were changing a css property
instead of just using an inline style.

See: https://sentry.slack.com/archives/C04RDSY3ML1/p1680797672151699

static/app/components/replays/player/scrubber.tsx

@@ -21,8 +21,18 @@ function Scrubber({className}: Props) {
   return (
     <Wrapper className={className}>
       <Meter>
-        {currentHoverTime ? <MouseTrackingValue percent={hoverPlace} /> : null}
-        <PlaybackTimeValue percent={percentComplete} />
+        {currentHoverTime ? (
+          <MouseTrackingValue
+            style={{
+              width: hoverPlace * 100 + '%',
+            }}
+          />
+        ) : null}
+        <PlaybackTimeValue
+          style={{
+            width: percentComplete * 100 + '%',
+          }}
+        />
       </Meter>
       <RangeWrapper>
         <Range

static/app/components/replays/progress.tsx

@@ -1,3 +1,4 @@
+import {CSSProperties} from 'react';
 import styled from '@emotion/styled';
 
 /**
@@ -21,10 +22,9 @@ export const Meter = styled('div')`
 `;
 
 export const Value = styled('span')<{
-  percent: number;
+  style: {width: string} & CSSProperties;
 }>`
   position: absolute;
   height: 100%;
-  width: ${p => p.percent * 100}%;
   pointer-events: none;
 `;