wip

static/app/utils/replays/hooks/useSplitPanelTracking.tsx

@@ -5,6 +5,7 @@ import useReplayLayout from 'sentry/utils/replays/hooks/useReplayLayout';
 import useOrganization from 'sentry/utils/useOrganization';
 
 type CSSValuePct = `${number}%`;
+type CSSValueFR = `${number}fr`;
 
 type Options = {
   slideDirection: 'updown' | 'leftright';
@@ -15,15 +16,20 @@ function useSplitPanelTracking({slideDirection}: Options) {
   const {getLayout} = useReplayLayout();
   const startSizeCSSRef = useRef<number>(0);
 
-  const setStartPosition = useCallback((startPosition: undefined | CSSValuePct) => {
-    startSizeCSSRef.current = Number(startPosition?.replace('%', '') || 0);
-  }, []);
+  const setStartPosition = useCallback(
+    (startPosition: undefined | CSSValuePct | CSSValueFR) => {
+      startSizeCSSRef.current = Number(startPosition?.replace('%', '') || 0);
+    },
+    []
+  );
 
   const logEndPosition = useCallback(
-    (endPosition: undefined | CSSValuePct) => {
+    (endPosition: undefined | CSSValuePct | CSSValueFR) => {
       const smaller = slideDirection === 'updown' ? 'toTop' : 'toLeft';
       const bigger = slideDirection === 'updown' ? 'toBottom' : 'toRight';
-      const endSizeCSS = Number(endPosition?.replace('%', '') || 0);
+      const endSizeCSS = Number(
+        endPosition?.endsWith('fr') ? '50' : endPosition?.replace('%', '') || 0
+      );
       trackAdvancedAnalyticsEvent('replay.details-resized-panel', {
         organization,
         layout: getLayout(),

static/app/views/replays/detail/layout/index.tsx

@@ -163,7 +163,7 @@ function ReplayLayout({layout = LayoutKey.topbar}: Props) {
           }}
           right={{
             content: focusArea,
-            default: '50%',
+            default: '1fr',
             min: MIN_CONTENT_WIDTH,
           }}
         />

static/app/views/replays/detail/layout/splitPanel.tsx

@@ -14,7 +14,8 @@ const MOUSE_RELEASE_TIMEOUT_MS = 750;
 
 type CSSValuePX = `${number}px`;
 type CSSValuePct = `${number}%`;
-type CSSValue = CSSValuePX | CSSValuePct;
+type CSSValueFR = `${number}fr`;
+type CSSValue = CSSValuePX | CSSValuePct | CSSValueFR;
 type LimitValue =
   | {
       /**
@@ -31,7 +32,7 @@ type LimitValue =
 
 type Side = {
   content: ReactNode;
-  default?: CSSValuePct;
+  default?: CSSValuePct | CSSValueFR;
   max?: LimitValue;
   min?: LimitValue;
 };
@@ -106,7 +107,7 @@ function getMinMax(side: Side): {
 function SplitPanel(props: Props) {
   const [isMousedown, setIsMousedown] = useState(false);
   const [sizeCSS, setSizeCSS] = useState(getSplitDefault(props));
-  const sizeCSSRef = useRef<undefined | CSSValuePct>();
+  const sizeCSSRef = useRef<undefined | CSSValuePct | CSSValueFR>();
   sizeCSSRef.current = sizeCSS.a;
 
   const {setStartPosition, logEndPosition} = useSplitPanelTracking({