update performance css, small replay fixes

src/app/(main)/websites/[websiteId]/replays/[replayId]/ReplayPlayback.tsx

@@ -47,7 +47,7 @@ export function ReplayPlayback({
       isLoading={isLoading}
       error={error}
       loadingIcon="spinner"
-      loadingPlacement="absolute"
+      style={{ minHeight: '400px' }}
     >
       {replay && (
         <Column gap="6">

src/components/metrics/PerformanceCard.module.css

@@ -3,15 +3,11 @@
 }
 
 .card:hover {
-  box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent),
-    0 0 6px color-mix(in srgb, var(--primary) 15%, transparent);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .card.selected {
-  box-shadow:
-    0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent),
-    0 0 6px color-mix(in srgb, var(--primary) 15%, transparent);
+  box-shadow: 0 0 0 1px var(--primary);
 }
 
 .good .rating {

src/recorder/index.js

@@ -25,7 +25,7 @@ import { record } from 'rrweb';
     hostUrl || '__COLLECT_API_HOST__' || currentScript.src.split('/').slice(0, -1).join('/');
   const endpoint = `${host.replace(/\/$/, '')}__COLLECT_REPLAY_ENDPOINT__`;
 
-  const FLUSH_EVENT_COUNT = 50;
+  const FLUSH_EVENT_COUNT = 100;
   const FLUSH_INTERVAL = 10000;
 
   let eventBuffer = [];