diff --git a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
index 7cdf9d2aa..59f36a6cb 100644
--- a/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
+++ b/packages/core/src/blocks/AudioBlockContent/AudioBlockContent.ts
@@ -64,12 +64,12 @@ export const audioRender = (
   audio.contentEditable = "false";
   audio.draggable = false;
 
-  const element = createFileAndCaptionWrapper(block, audio);
+  const fileAndCaptionWrapper = createFileAndCaptionWrapper(block, audio);
 
   return createFileBlockWrapper(
     block,
     editor,
-    element,
+    fileAndCaptionWrapper,
     editor.dictionary.file_blocks.audio.add_button_text,
     icon.firstElementChild as HTMLElement
   );
diff --git a/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts b/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts
index 9e1e960c1..ba9a4d95a 100644
--- a/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts
+++ b/packages/core/src/blocks/FileBlockContent/FileBlockContent.ts
@@ -43,9 +43,10 @@ export const fileRender = (
   editor: BlockNoteEditor<any, any, any>
 ) => {
   const file = createDefaultFilePreview(block).dom;
-  const element = createFileAndCaptionWrapper(block, file);
 
-  return createFileBlockWrapper(block, editor, element);
+  const fileAndCaptionWrapper = createFileAndCaptionWrapper(block, file);
+
+  return createFileBlockWrapper(block, editor, fileAndCaptionWrapper);
 };
 
 export const fileParse = (element: HTMLElement) => {
diff --git a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
index 58600671f..c08bd07a9 100644
--- a/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
+++ b/packages/core/src/blocks/FileBlockContent/fileBlockHelpers.ts
@@ -108,14 +108,6 @@ export const createFileAndCaptionWrapper = (
   caption.className = "bn-file-caption";
   caption.textContent = block.props.caption;
 
-  if (
-    typeof block.props.previewWidth === "number" &&
-    block.props.previewWidth > 0 &&
-    block.props.caption !== undefined
-  ) {
-    caption.style.width = `${block.props.previewWidth}px`;
-  }
-
   fileAndCaptionWrapper.appendChild(file);
   fileAndCaptionWrapper.appendChild(caption);
 
@@ -250,9 +242,7 @@ export const createFigureWithCaption = (
 export const createResizeHandlesWrapper = (
   block: BlockFromConfig<FileBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>,
-  element: HTMLElement,
-  getWidth: () => number,
-  setWidth: (width: number) => void
+  element: HTMLElement
 ): { dom: HTMLElement; destroy: () => void } => {
   if (!block.props.previewWidth) {
     throw new Error("Block must have a `previewWidth` prop.");
@@ -260,14 +250,15 @@ export const createResizeHandlesWrapper = (
 
   // Wrapper element for rendered element and resize handles.
   const wrapper = document.createElement("div");
-  wrapper.className = "bn-visual-media-wrapper";
+  wrapper.className = "bn-resize-handles-wrapper";
+  wrapper.style.width = `${block.props.previewWidth}px`;
 
   // Resize handle elements.
   const leftResizeHandle = document.createElement("div");
-  leftResizeHandle.className = "bn-visual-media-resize-handle";
+  leftResizeHandle.className = "bn-resize-handle";
   leftResizeHandle.style.left = "4px";
   const rightResizeHandle = document.createElement("div");
-  rightResizeHandle.className = "bn-visual-media-resize-handle";
+  rightResizeHandle.className = "bn-resize-handle";
   rightResizeHandle.style.right = "4px";
 
   // Temporary parameters set when the user begins resizing the element, used to
@@ -328,11 +319,13 @@ export const createResizeHandlesWrapper = (
     // Ensures the element is not wider than the editor and not smaller than a
     // predetermined minimum width.
     if (newWidth < minWidth) {
-      setWidth(minWidth);
+      wrapper.style.width = `${minWidth}`;
     } else if (newWidth > editor.domElement.firstElementChild!.clientWidth) {
-      setWidth(editor.domElement.firstElementChild!.clientWidth);
+      wrapper.style.width = `${
+        editor.domElement.firstElementChild!.clientWidth
+      }px`;
     } else {
-      setWidth(newWidth);
+      wrapper.style.width = `${newWidth}px`;
     }
   };
   // Stops mouse movements from resizing the element and updates the block's
@@ -358,7 +351,7 @@ export const createResizeHandlesWrapper = (
 
     editor.updateBlock(block, {
       props: {
-        previewWidth: getWidth(),
+        previewWidth: parseInt(wrapper.style.width.replace("px", "")),
       },
     });
   };
diff --git a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
index 32ad7df41..623a95031 100644
--- a/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
+++ b/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts
@@ -57,6 +57,17 @@ export const imageRender = (
   block: BlockFromConfig<typeof imageBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
+  // Immediately updates & re-renders the block if it's wider than the editor.
+  if (
+    block.props.previewWidth > editor.domElement.firstElementChild!.clientWidth
+  ) {
+    editor.updateBlock(block, {
+      props: {
+        previewWidth: editor.domElement.firstElementChild!.clientWidth,
+      },
+    });
+  }
+
   const icon = document.createElement("div");
   icon.innerHTML = FILE_IMAGE_ICON_SVG;
 
@@ -68,25 +79,19 @@ export const imageRender = (
   image.alt = block.props.name || block.props.caption || "BlockNote image";
   image.contentEditable = "false";
   image.draggable = false;
-  image.width = Math.min(
-    block.props.previewWidth,
-    editor.domElement.firstElementChild!.clientWidth
-  );
 
-  const file = createResizeHandlesWrapper(
+  const fileAndCaptionWrapper = createFileAndCaptionWrapper(block, image);
+
+  const resizeHandlesWrapper = createResizeHandlesWrapper(
     block,
     editor,
-    image,
-    () => image.width,
-    (width) => (image.width = width)
+    fileAndCaptionWrapper.dom
   );
 
-  const element = createFileAndCaptionWrapper(block, file.dom);
-
   return createFileBlockWrapper(
     block,
     editor,
-    element,
+    resizeHandlesWrapper,
     editor.dictionary.file_blocks.image.add_button_text,
     icon.firstElementChild as HTMLElement
   );
diff --git a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
index 5dacc6ae7..161a995ef 100644
--- a/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
+++ b/packages/core/src/blocks/VideoBlockContent/VideoBlockContent.ts
@@ -58,6 +58,17 @@ export const videoRender = (
   block: BlockFromConfig<typeof videoBlockConfig, any, any>,
   editor: BlockNoteEditor<any, any, any>
 ) => {
+  // Immediately updates & re-renders the block if it's wider than the editor.
+  if (
+    block.props.previewWidth > editor.domElement.firstElementChild!.clientWidth
+  ) {
+    editor.updateBlock(block, {
+      props: {
+        previewWidth: editor.domElement.firstElementChild!.clientWidth,
+      },
+    });
+  }
+
   const icon = document.createElement("div");
   icon.innerHTML = FILE_VIDEO_ICON_SVG;
 
@@ -67,25 +78,19 @@ export const videoRender = (
   video.controls = true;
   video.contentEditable = "false";
   video.draggable = false;
-  video.width = Math.min(
-    block.props.previewWidth,
-    editor.domElement.firstElementChild!.clientWidth
-  );
 
-  const file = createResizeHandlesWrapper(
+  const fileAndCaptionWrapper = createFileAndCaptionWrapper(block, video);
+
+  const resizeHandlesWrapper = createResizeHandlesWrapper(
     block,
     editor,
-    video,
-    () => video.width,
-    (width) => (video.width = width)
+    fileAndCaptionWrapper.dom
   );
 
-  const element = createFileAndCaptionWrapper(block, file.dom);
-
   return createFileBlockWrapper(
     block,
     editor,
-    element,
+    resizeHandlesWrapper,
     editor.dictionary.file_blocks.video.add_button_text,
     icon.firstElementChild as HTMLElement
   );
diff --git a/packages/core/src/editor/Block.css b/packages/core/src/editor/Block.css
index 7ec40dc94..f385f5741 100644
--- a/packages/core/src/editor/Block.css
+++ b/packages/core/src/editor/Block.css
@@ -350,6 +350,7 @@ NESTED BLOCKS
   display: flex;
   flex-direction: column;
   border-radius: 4px;
+  width: 100%;
 }
 
 [data-file-block] .bn-file-default-preview {
@@ -372,12 +373,11 @@ NESTED BLOCKS
   height: 24px;
 }
 
-[data-file-block] .bn-visual-media-wrapper {
+[data-file-block] .bn-resize-handles-wrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
   position: relative;
-  width: fit-content;
 }
 
 [data-file-block] .bn-visual-media {
@@ -385,7 +385,7 @@ NESTED BLOCKS
   max-width: 100%;
 }
 
-[data-file-block] .bn-visual-media-resize-handle {
+[data-file-block] .bn-resize-handle {
   position: absolute;
   width: 8px;
   height: 30px;
diff --git a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
index 958db0c85..9f0299b8a 100644
--- a/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
+++ b/packages/react/src/blocks/AudioBlockContent/AudioBlockContent.tsx
@@ -8,6 +8,7 @@ import {
 } from "../../schema/ReactBlockSpec.js";
 import {
   FigureWithCaption,
+  FileAndCaptionWrapper,
   FileBlockWrapper,
   LinkWithCaption,
 } from "../FileBlockContent/fileBlockHelpers.js";
@@ -26,13 +27,15 @@ export const AudioPreview = (
   }
 
   return (
-    <audio
-      className={"bn-audio"}
-      src={resolved.downloadUrl}
-      controls={true}
-      contentEditable={false}
-      draggable={false}
-    />
+    <FileAndCaptionWrapper {...props}>
+      <audio
+        className={"bn-audio"}
+        src={resolved.downloadUrl}
+        controls={true}
+        contentEditable={false}
+        draggable={false}
+      />
+    </FileAndCaptionWrapper>
   );
 };
 
@@ -77,7 +80,7 @@ export const AudioBlock = (
       {...(props as any)}
       buttonText={props.editor.dictionary.file_blocks.audio.add_button_text}
       buttonIcon={<RiVolumeUpFill size={24} />}>
-      <AudioPreview block={props.block} editor={props.editor as any} />
+      <AudioPreview {...(props as any)} />
     </FileBlockWrapper>
   );
 };
diff --git a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
index da59ad2e0..3c5b4cf7f 100644
--- a/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
+++ b/packages/react/src/blocks/FileBlockContent/FileBlockContent.tsx
@@ -1,4 +1,4 @@
-import { fileBlockConfig, fileParse } from "@blocknote/core";
+import { FileBlockConfig, fileBlockConfig, fileParse } from "@blocknote/core";
 
 import {
   createReactBlockSpec,
@@ -6,10 +6,22 @@ import {
 } from "../../schema/ReactBlockSpec.js";
 import {
   DefaultFilePreview,
+  FileAndCaptionWrapper,
   FileBlockWrapper,
   LinkWithCaption,
 } from "./fileBlockHelpers.js";
 
+export const FilePreview = (
+  props: Omit<
+    ReactCustomBlockRenderProps<FileBlockConfig, any, any>,
+    "contentRef"
+  >
+) => (
+  <FileAndCaptionWrapper {...props}>
+    <DefaultFilePreview {...props} />
+  </FileAndCaptionWrapper>
+);
+
 export const FileToExternalHTML = (
   props: Omit<
     ReactCustomBlockRenderProps<typeof fileBlockConfig, any, any>,
@@ -42,7 +54,7 @@ export const FileBlock = (
 ) => {
   return (
     <FileBlockWrapper {...(props as any)}>
-      <DefaultFilePreview block={props.block} editor={props.editor as any} />
+      <FilePreview {...(props as any)} />
     </FileBlockWrapper>
   );
 };
diff --git a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
index a18e32989..3430600f4 100644
--- a/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
+++ b/packages/react/src/blocks/FileBlockContent/fileBlockHelpers.tsx
@@ -30,9 +30,7 @@ export const FileBlockWrapper = (
           />
         </FileAndCaptionWrapper>
       ) : (
-        <FileAndCaptionWrapper block={props.block} editor={props.editor as any}>
-          {props.children}
-        </FileAndCaptionWrapper>
+        props.children
       )}
     </div>
   );
@@ -142,11 +140,10 @@ export const ResizeHandlesWrapper = (
   props: Required<
     Omit<ReactCustomBlockRenderProps<FileBlockConfig, any, any>, "contentRef">
   > & {
-    width: number;
-    setWidth: (width: number) => void;
     children: ReactNode;
   }
 ) => {
+  const [width, setWidth] = useState(props.block.props.previewWidth! as number);
   const [childHovered, setChildHovered] = useState<boolean>(false);
   const [resizeParams, setResizeParams] = useState<
     | {
@@ -193,13 +190,13 @@ export const ResizeHandlesWrapper = (
       // Ensures the child is not wider than the editor and not smaller than a
       // predetermined minimum width.
       if (newWidth < minWidth) {
-        props.setWidth(minWidth);
+        setWidth(minWidth);
       } else if (
         newWidth > props.editor.domElement.firstElementChild!.clientWidth
       ) {
-        props.setWidth(props.editor.domElement.firstElementChild!.clientWidth);
+        setWidth(props.editor.domElement.firstElementChild!.clientWidth);
       } else {
-        props.setWidth(newWidth);
+        setWidth(newWidth);
       }
     };
     // Stops mouse movements from resizing the child and updates the block's
@@ -209,7 +206,7 @@ export const ResizeHandlesWrapper = (
 
       (props.editor as any).updateBlock(props.block, {
         props: {
-          previewWidth: props.width,
+          previewWidth: width,
         },
       });
     };
@@ -223,7 +220,7 @@ export const ResizeHandlesWrapper = (
       window.removeEventListener("mousemove", windowMouseMoveHandler);
       window.removeEventListener("mouseup", windowMouseUpHandler);
     };
-  }, [props, resizeParams]);
+  }, [props, resizeParams, width]);
 
   // Shows the resize handles when hovering over the child with the cursor.
   const childWrapperMouseEnterHandler = useCallback(() => {
@@ -246,11 +243,11 @@ export const ResizeHandlesWrapper = (
 
       setResizeParams({
         handleUsed: "left",
-        initialWidth: props.width,
+        initialWidth: width,
         initialClientX: event.clientX,
       });
     },
-    [props.width]
+    [width]
   );
   const rightResizeHandleMouseDownHandler = useCallback(
     (event: React.MouseEvent) => {
@@ -258,28 +255,29 @@ export const ResizeHandlesWrapper = (
 
       setResizeParams({
         handleUsed: "right",
-        initialWidth: props.width,
+        initialWidth: width,
         initialClientX: event.clientX,
       });
     },
-    [props.width]
+    [width]
   );
 
   return (
     <div
-      className={"bn-visual-media-wrapper"}
+      className={"bn-resize-handles-wrapper"}
       onMouseEnter={childWrapperMouseEnterHandler}
-      onMouseLeave={childWrapperMouseLeaveHandler}>
+      onMouseLeave={childWrapperMouseLeaveHandler}
+      style={{ width }}>
       {props.children}
       {(childHovered || resizeParams) && (
         <>
           <div
-            className={"bn-visual-media-resize-handle"}
+            className={"bn-resize-handle"}
             style={{ left: "4px" }}
             onMouseDown={leftResizeHandleMouseDownHandler}
           />
           <div
-            className={"bn-visual-media-resize-handle"}
+            className={"bn-resize-handle"}
             style={{ right: "4px" }}
             onMouseDown={rightResizeHandleMouseDownHandler}
           />
diff --git a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
index 6ad43d611..ddae2f652 100644
--- a/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
+++ b/packages/react/src/blocks/ImageBlockContent/ImageBlockContent.tsx
@@ -1,5 +1,5 @@
 import { FileBlockConfig, imageBlockConfig, imageParse } from "@blocknote/core";
-import { useState } from "react";
+import { useEffect } from "react";
 import { RiImage2Fill } from "react-icons/ri";
 
 import {
@@ -8,6 +8,7 @@ import {
 } from "../../schema/ReactBlockSpec.js";
 import {
   FigureWithCaption,
+  FileAndCaptionWrapper,
   FileBlockWrapper,
   LinkWithCaption,
   ResizeHandlesWrapper,
@@ -20,12 +21,24 @@ export const ImagePreview = (
     "contentRef"
   >
 ) => {
-  const [width, setWidth] = useState<number>(
-    Math.min(
-      props.block.props.previewWidth!,
-      props.editor.domElement.firstElementChild!.clientWidth
-    )
-  );
+  // Immediately updates & re-renders the block if it's wider than the editor.
+  useEffect(() => {
+    // Have to wait for initial render.
+    setTimeout(() => {
+      if (
+        props.editor.domElement.firstElementChild &&
+        props.block.props.previewWidth! >
+          props.editor.domElement.firstElementChild.clientWidth
+      ) {
+        props.editor.updateBlock(props.block, {
+          props: {
+            previewWidth: props.editor.domElement.firstElementChild
+              .clientWidth as any,
+          },
+        });
+      }
+    });
+  }, [props.block, props.editor]);
 
   const resolved = useResolveUrl(props.block.props.url!);
 
@@ -34,15 +47,16 @@ export const ImagePreview = (
   }
 
   return (
-    <ResizeHandlesWrapper {...props} width={width} setWidth={setWidth}>
-      <img
-        className={"bn-visual-media"}
-        src={resolved.downloadUrl}
-        alt={props.block.props.caption || "BlockNote image"}
-        contentEditable={false}
-        draggable={false}
-        width={width}
-      />
+    <ResizeHandlesWrapper {...props}>
+      <FileAndCaptionWrapper {...props}>
+        <img
+          className={"bn-visual-media"}
+          src={resolved.downloadUrl}
+          alt={props.block.props.caption || "BlockNote image"}
+          contentEditable={false}
+          draggable={false}
+        />
+      </FileAndCaptionWrapper>
     </ResizeHandlesWrapper>
   );
 };
@@ -94,7 +108,7 @@ export const ImageBlock = (
       {...(props as any)}
       buttonText={props.editor.dictionary.file_blocks.image.add_button_text}
       buttonIcon={<RiImage2Fill size={24} />}>
-      <ImagePreview block={props.block} editor={props.editor as any} />
+      <ImagePreview {...(props as any)} />
     </FileBlockWrapper>
   );
 };
diff --git a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
index 96bf42ae1..d4e89526a 100644
--- a/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
+++ b/packages/react/src/blocks/VideoBlockContent/VideoBlockContent.tsx
@@ -1,5 +1,5 @@
 import { FileBlockConfig, videoBlockConfig, videoParse } from "@blocknote/core";
-import { useState } from "react";
+import { useEffect } from "react";
 import { RiVideoFill } from "react-icons/ri";
 
 import {
@@ -8,6 +8,7 @@ import {
 } from "../../schema/ReactBlockSpec.js";
 import {
   FigureWithCaption,
+  FileAndCaptionWrapper,
   FileBlockWrapper,
   LinkWithCaption,
   ResizeHandlesWrapper,
@@ -20,12 +21,24 @@ export const VideoPreview = (
     "contentRef"
   >
 ) => {
-  const [width, setWidth] = useState<number>(
-    Math.min(
-      props.block.props.previewWidth!,
-      props.editor.domElement.firstElementChild!.clientWidth
-    )
-  );
+  // Immediately updates & re-renders the block if it's wider than the editor.
+  useEffect(() => {
+    // Have to wait for initial render.
+    setTimeout(() => {
+      if (
+        props.editor.domElement.firstElementChild &&
+        props.block.props.previewWidth! >
+          props.editor.domElement.firstElementChild.clientWidth
+      ) {
+        props.editor.updateBlock(props.block, {
+          props: {
+            previewWidth: props.editor.domElement.firstElementChild
+              .clientWidth as any,
+          },
+        });
+      }
+    });
+  }, [props.block, props.editor]);
 
   const resolved = useResolveUrl(props.block.props.url!);
 
@@ -34,15 +47,16 @@ export const VideoPreview = (
   }
 
   return (
-    <ResizeHandlesWrapper {...props} width={width} setWidth={setWidth}>
-      <video
-        className={"bn-visual-media"}
-        src={resolved.downloadUrl}
-        controls={true}
-        contentEditable={false}
-        draggable={false}
-        width={width}
-      />
+    <ResizeHandlesWrapper {...props}>
+      <FileAndCaptionWrapper {...props}>
+        <video
+          className={"bn-visual-media"}
+          src={resolved.downloadUrl}
+          controls={true}
+          contentEditable={false}
+          draggable={false}
+        />
+      </FileAndCaptionWrapper>
     </ResizeHandlesWrapper>
   );
 };
@@ -88,7 +102,7 @@ export const VideoBlock = (
       {...(props as any)}
       buttonText={props.editor.dictionary.file_blocks.video.add_button_text}
       buttonIcon={<RiVideoFill size={24} />}>
-      <VideoPreview block={props.block} editor={props.editor as any} />
+      <VideoPreview {...(props as any)} />
     </FileBlockWrapper>
   );
 };
diff --git a/tests/src/end-to-end/copypaste/copypaste.test.ts b/tests/src/end-to-end/copypaste/copypaste.test.ts
index 1c1a18298..de3728aff 100644
--- a/tests/src/end-to-end/copypaste/copypaste.test.ts
+++ b/tests/src/end-to-end/copypaste/copypaste.test.ts
@@ -160,11 +160,9 @@ test.describe("Check Copy/Paste Functionality", () => {
 
     await page.click(`img`);
 
-    await page.waitForSelector(
-      `[class*="bn-visual-media-resize-handle"][style*="right"]`
-    );
+    await page.waitForSelector(`[class*="bn-resize-handle"][style*="right"]`);
     const resizeHandle = page.locator(
-      `[class*="bn-visual-media-resize-handle"][style*="right"]`
+      `[class*="bn-resize-handle"][style*="right"]`
     );
     const resizeHandleBoundingBox = (await resizeHandle.boundingBox())!;
     await page.mouse.move(
diff --git a/tests/src/end-to-end/images/images.test.ts b/tests/src/end-to-end/images/images.test.ts
index 2cc1d5a00..9577a2acc 100644
--- a/tests/src/end-to-end/images/images.test.ts
+++ b/tests/src/end-to-end/images/images.test.ts
@@ -73,11 +73,9 @@ test.describe("Check Image Block and Toolbar functionality", () => {
 
     await page.click(`img`);
 
-    await page.waitForSelector(
-      `[class*="bn-visual-media-resize-handle"][style*="right"]`
-    );
+    await page.waitForSelector(`[class*="bn-resize-handle"][style*="right"]`);
     const resizeHandle = page.locator(
-      `[class*="bn-visual-media-resize-handle"][style*="right"]`
+      `[class*="bn-resize-handle"][style*="right"]`
     );
     const resizeHandleBoundingBox = (await resizeHandle.boundingBox())!;
     await page.mouse.move(