src/hooks/useScale.tsx

@@ -6,10 +6,26 @@ const noScaleInit = {
   from: (_: number, v: number) => v
 }
 
+const getInnerContentWidth = () => {
+  // Fetch the first container element we find
+  const element = document.querySelector('#content-preview')
+
+  if (element) {
+    const style = getComputedStyle(element)
+
+    // Calculate width without padding
+    const widthWithoutPadding =
+      element.clientWidth - parseFloat(style.padding) * 2
+
+    return widthWithoutPadding
+  }
+
+  // Default value
+  return 620
+}
+
 const useScaleImpl = () => {
-  const [width, setWidth] = useState(
+  const [width, setWidth] = useState(getInnerContentWidth())
-    document.querySelector('#content-preview > *')?.clientWidth || 1
-  )
 
   // Get the scale based on the original width
   const scale = (originalWidth: number) => {
@@ -26,16 +42,11 @@ const useScaleImpl = () => {
     return value * scale(originalWidth)
   }
 
-  useEffect(() => {
   const resize = () => {
-      // Fetch the first container element we find
+    setWidth(getInnerContentWidth())
-      const element = document.querySelector('#content-preview > *')
+  }
 
-      // Set the width state
+  useEffect(() => {
-      if (element) {
-        setWidth(element.clientWidth)
-      }
-    }
     resize()
 
     window.addEventListener('resize', resize)