From 065dbeaf75bff7507186be6f7409a4ed01fe5541 Mon Sep 17 00:00:00 2001
From: prashant-gurung899 <prasantgrg777@gmail.com>
Date: Thu, 21 May 2026 11:42:59 +0545
Subject: [PATCH] fix scaling

Signed-off-by: prashant-gurung899 <prasantgrg777@gmail.com>
---
 src/App.vue | 88 ++++++++++++++++++++++++++++++-----------------------
 1 file changed, 50 insertions(+), 38 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f1d4aaf..f7d8471 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -443,66 +443,78 @@ function adjustFontSize() {
     return element.offsetHeight + marginTop + marginBottom + paddingTop + paddingBottom
   }
 
+  const contentContainer = currentSlide.querySelector('.content-container') as HTMLElement | null
   const contentWrapper = currentSlide.querySelector('.content-wrapper') as HTMLElement
   const content = currentSlide.querySelector('.content') as HTMLElement
 
   if (!contentWrapper || !content) return
 
+  // Reset any previous scaling from prior runs
+  if (contentContainer) {
+    contentContainer.style.fontSize = ''
+  }
+  ;(Array.from(content.children) as HTMLElement[]).forEach((el) => {
+    el.style.fontSize = ''
+    el.style.marginTop = ''
+    el.style.marginBottom = ''
+  })
+
   const contentWrapperHeight = contentWrapper.offsetHeight
   let totalHeight = getTotalHeightOfChildren(content)
 
   // set minimum font size from where the image starts to get reduced as well
   // this is to prevent the font size to get too small and becomes hard to read
   const fontSizeToStartReducingImage = 12
-  let fontSize = parseFloat(getComputedStyle(content).fontSize)
 
-  while (totalHeight > contentWrapperHeight) {
+  if (totalHeight > contentWrapperHeight) {
     const scaleFactor = contentWrapperHeight / totalHeight
-    fontSize = Math.floor(scaleFactor * fontSize)
-
-    const wrapperElements = Array.from(content.children) as HTMLElement[]
-    wrapperElements.forEach((wrapperElement) => {
-      wrapperElement.style.fontSize = `${fontSize}px`
-      const style = getComputedStyle(wrapperElement)
-      const marginTop = Math.floor(parseFloat(style.marginTop) * scaleFactor)
-      const marginBottom = Math.floor(parseFloat(style.marginBottom) * scaleFactor)
-      wrapperElement.style.marginTop = `${marginTop}px`
-      wrapperElement.style.marginBottom = `${marginBottom}px`
-    })
 
-    // reduce image size if font size gets smaller than minimum font size
-    const images = content.querySelectorAll(
-      '.image-container .image-wrapper img'
-    ) as NodeListOf<HTMLImageElement>
-    if (fontSize <= fontSizeToStartReducingImage && images.length > 0) {
-      images.forEach((image) => {
-        const currentWidth = image.offsetWidth
-        const currentHeight = image.offsetHeight
-        image.style.width = `${Math.floor(currentWidth * scaleFactor)}px`
-        image.style.height = `${Math.floor(currentHeight * scaleFactor)}px`
+    if (contentContainer) {
+      contentContainer.style.fontSize = `${scaleFactor}em`
+
+      const effectiveFontSize =
+        scaleFactor * parseFloat(getComputedStyle(contentContainer).fontSize)
+      if (effectiveFontSize <= fontSizeToStartReducingImage) {
+        const images = content.querySelectorAll(
+          '.image-container .image-wrapper img'
+        ) as NodeListOf<HTMLImageElement>
+        images.forEach((image) => {
+          image.style.width = `${Math.floor(image.offsetWidth * scaleFactor)}px`
+          image.style.height = `${Math.floor(image.offsetHeight * scaleFactor)}px`
+        })
+      }
+    } else {
+      let fontSize = Math.floor(scaleFactor * parseFloat(getComputedStyle(content).fontSize))
+      const wrapperElements = Array.from(content.children) as HTMLElement[]
+      wrapperElements.forEach((el) => {
+        el.style.fontSize = `${fontSize}px`
+        const style = getComputedStyle(el)
+        el.style.marginTop = `${Math.floor(parseFloat(style.marginTop) * scaleFactor)}px`
+        el.style.marginBottom = `${Math.floor(parseFloat(style.marginBottom) * scaleFactor)}px`
       })
+
+      const images = content.querySelectorAll(
+        '.image-container .image-wrapper img'
+      ) as NodeListOf<HTMLImageElement>
+      if (fontSize <= fontSizeToStartReducingImage && images.length > 0) {
+        images.forEach((image) => {
+          image.style.width = `${Math.floor(image.offsetWidth * scaleFactor)}px`
+          image.style.height = `${Math.floor(image.offsetHeight * scaleFactor)}px`
+        })
+      }
     }
-    totalHeight = getTotalHeightOfChildren(content)
   }
 
   if (currentSlide.classList.contains('about-us')) {
-    const content = currentSlide.querySelector('.content') as HTMLElement
     const infoSection = currentSlide.querySelector('.info-section') as HTMLElement
     const contentWidth = content.offsetWidth
-    let infoSectionWidth = infoSection.scrollWidth
-    while (infoSectionWidth > contentWidth) {
+    const infoSectionWidth = infoSection.scrollWidth
+    if (infoSectionWidth > contentWidth) {
       const scaleFactor = contentWidth / infoSectionWidth
-      fontSize = Math.floor(scaleFactor * fontSize)
-
-      const infoBoxes = infoSection.querySelectorAll('.info-box') as NodeListOf<HTMLElement>
-      infoBoxes.forEach((box) => {
-        box.style.fontSize = `${fontSize}px`
-        const style = getComputedStyle(box)
-        const padding = parseFloat(style.padding) * scaleFactor
-        box.style.padding = `${Math.max(2, Math.floor(padding))}px`
-        box.style.margin = `${Math.max(2, Math.floor(parseFloat(style.margin) * scaleFactor))}px`
-      })
-      infoSectionWidth = infoSection.scrollWidth
+      if (contentContainer) {
+        const currentEm = parseFloat(contentContainer.style.fontSize) || 1
+        contentContainer.style.fontSize = `${currentEm * scaleFactor}em`
+      }
     }
   }
 }