fix: vertical resizing wasn't working for session player (#144)

.changeset/slimy-pandas-laugh.md

@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+Fix: Vertically resize session replayer

packages/app/src/DOMPlayer.tsx

@@ -367,7 +367,7 @@ export default function DOMPlayer({
   }, [lastEventTsLoaded, focus, playerState, pause, play]);
 
   return (
-    <div>
+    <>
       {lastHref != '' && (
         <div className="bg-dark rounded p-2 mb-2">{lastHref}</div>
       )}
@@ -396,6 +396,11 @@ export default function DOMPlayer({
           'd-none': isLoading || isBuffering,
           started: (replayer.current?.getCurrentTime() ?? 0) > 0,
         })}
+        style={{
+          marginBottom: 80, // XXX (mikeshi): This is a CSS hack as the side panel parent
+          // height is 100%, which is incorrect and will be higher than the actual height available
+          // however fixing the side panel to use flex will likely take longer to fix
+        }}
       >
         <div
           className="player rr-block"
@@ -405,6 +410,6 @@ export default function DOMPlayer({
           }}
         />
       </div>
-    </div>
+    </>
   );
 }

packages/app/src/SessionSubpanel.tsx

@@ -523,9 +523,15 @@ export default function SessionSubpanel({
           />
         </div>
       </div>
-      <div style={{ width: playerFullWidth ? '100%' : '50%' }}>
+      <div
+        style={{ width: playerFullWidth ? '100%' : '50%' }}
+        className="d-flex flex-column"
+      >
         <div className="fs-8 text-muted mt-4 mb-2">Session Player</div>
-        <div className="mt-1 border-top border-dark mb-2">
+        <div
+          className="d-flex flex-column mt-1 border-top border-dark mb-2"
+          style={{ minHeight: 0 }}
+        >
           <div className="mb-3 mt-2">
             <MemoPlaybar
               playerState={playerState}