make relative

src/css/styles.scss

@@ -575,3 +575,14 @@
     }
   }
 }
+
+.excalidraw-textEditorContainer {
+  overflow: hidden;
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  pointer-events: none;
+  textarea {
+    pointer-events: all;
+  }
+}

src/element/textWysiwyg.tsx

@@ -21,18 +21,14 @@ const getTransform = (
   height: number,
   angle: number,
   appState: AppState,
-  maxWidth: number,
 ) => {
   const { zoom, offsetTop, offsetLeft } = appState;
   const degree = (180 * angle) / Math.PI;
   // offsets must be multiplied by 2 to account for the division by 2 of
   // the whole expression afterwards
-  let translateX = ((width - offsetLeft * 2) * (zoom.value - 1)) / 2;
+  return `translate(${((width - offsetLeft * 2) * (zoom.value - 1)) / 2}px, ${
-  const translateY = ((height - offsetTop * 2) * (zoom.value - 1)) / 2;
+    ((height - offsetTop * 2) * (zoom.value - 1)) / 2
-  if (width > maxWidth && zoom.value !== 1) {
+  }px) scale(${zoom.value}) rotate(${degree}deg)`;
-    translateX = (maxWidth / 2) * (zoom.value - 1);
-  }
-  return `translate(${translateX}px, ${translateY}px) scale(${zoom.value}) rotate(${degree}deg)`;
 };
 
 export const textWysiwyg = ({
@@ -65,15 +61,6 @@ export const textWysiwyg = ({
 
       const lines = updatedElement.text.replace(/\r\n?/g, "\n").split("\n");
       const lineHeight = updatedElement.height / lines.length;
-      const maxWidth =
-        (appState.offsetLeft + appState.width - viewportX - 8) /
-          appState.zoom.value -
-        // margin-right of parent if any
-        Number(
-          getComputedStyle(
-            document.querySelector(".excalidraw")!.parentNode as Element,
-          ).marginRight.slice(0, -2),
-        );
 
       Object.assign(editable.style, {
         font: getFontString(updatedElement),
@@ -88,13 +75,11 @@ export const textWysiwyg = ({
           updatedElement.height,
           angle,
           appState,
-          maxWidth,
         ),
         textAlign,
         color: updatedElement.strokeColor,
         opacity: updatedElement.opacity / 100,
         filter: "var(--appearance-filter)",
-        maxWidth: `${maxWidth}px`,
       });
     }
   };
@@ -108,7 +93,7 @@ export const textWysiwyg = ({
   editable.wrap = "off";
 
   Object.assign(editable.style, {
-    position: "absolute",
+    position: "relative",
     display: "inline-block",
     minHeight: "1em",
     backfaceVisibility: "hidden",