Enable browser recording (#4182)

skyvern-frontend/src/components/Flippable.tsx

@@ -1,4 +1,6 @@
 import { ReactNode, Children, useRef, useEffect } from "react";
+
+import { useRecordingStore } from "@/store/useRecordingStore";
 import { cn } from "@/util/utils";
 
 interface FlippableProps {
@@ -22,6 +24,7 @@ export function Flippable({
   className,
   preserveFrontsideHeight = false,
 }: FlippableProps) {
+  const recordingStore = useRecordingStore();
   const childrenArray = Children.toArray(children);
   const front = childrenArray[0];
   const back = childrenArray[1];
@@ -48,7 +51,12 @@ export function Flippable({
   }, [facing, preserveFrontsideHeight]);
 
   return (
-    <div className={className} style={{ perspective: "1000px" }}>
+    <div
+      className={cn(className, {
+        "pointer-events-none opacity-50": recordingStore.isRecording,
+      })}
+      style={{ perspective: "1000px" }}
+    >
       <div
         className={cn(
           "transition-transform duration-700",