From a442e71087c75f9e224794e4160b9f8d6dfc71d9 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Tue, 27 Aug 2024 17:28:18 +0200
Subject: [PATCH] fix(pdf): add proper default  width value

---
 src/hooks/useScale.tsx | 35 +++++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/hooks/useScale.tsx b/src/hooks/useScale.tsx
index 89eb8a5..86de61f 100644
--- a/src/hooks/useScale.tsx
+++ b/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(
-    document.querySelector('#content-preview > *')?.clientWidth || 1
-  )
+  const [width, setWidth] = useState(getInnerContentWidth())
 
   // 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
-      const element = document.querySelector('#content-preview > *')
+  const resize = () => {
+    setWidth(getInnerContentWidth())
+  }
 
-      // Set the width state
-      if (element) {
-        setWidth(element.clientWidth)
-      }
-    }
+  useEffect(() => {
     resize()
 
     window.addEventListener('resize', resize)