From 030cc12544566024819b45d19a20f212d8b11d52 Mon Sep 17 00:00:00 2001
From: Malaber <git@schaedler.rocks>
Date: Sun, 16 Mar 2025 16:22:12 +0100
Subject: [PATCH] Overengineering for big image text

---
 js/components/BigImage.js | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/js/components/BigImage.js b/js/components/BigImage.js
index b89f6ff..aba9d5a 100644
--- a/js/components/BigImage.js
+++ b/js/components/BigImage.js
@@ -1,9 +1,27 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 
 export function BigImage(props) {
+    useEffect(() => {
+        const handleResize = () => {
+            const element = document.querySelector('.dynamically-resizing-h1');
+            if (element) {
+                const parentWidth = element.parentElement.offsetWidth;
+                const fontSize = parentWidth / 16; // Adjust the divisor as needed
+                element.style.fontSize = `${fontSize}px`;
+            }
+        };
+
+        window.addEventListener('resize', handleResize);
+        handleResize(); // Initial call to set the font size
+
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+
     return (
         <div className="big-image">
-            <h1 className="display-1">{props.text}</h1>
+            <h1 className="text-truncate overflow-hidden dynamically-resizing-h1">{props.text}</h1>
         </div>
     );
 }