From ae954b00cb3ab48649e4abf27d68a5bca8db14ad Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Fri, 21 Nov 2025 21:18:34 -0800
Subject: [PATCH] add custom library header title sizer

---
 .../shared/components/library-header.tsx      | 37 ++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/src/renderer/features/shared/components/library-header.tsx b/src/renderer/features/shared/components/library-header.tsx
index aed506a4f..f883924c7 100644
--- a/src/renderer/features/shared/components/library-header.tsx
+++ b/src/renderer/features/shared/components/library-header.tsx
@@ -114,12 +114,20 @@ export const LibraryHeader = forwardRef(
                             fw={600}
                             isLink
                             size="md"
+                            style={{}}
                             to={item.route}
                             tt="uppercase"
                         >
                             {itemTypeString()}
                         </Text>
-                        <h1 className={styles.title}>{title}</h1>
+                        <h1
+                            className={styles.title}
+                            style={{
+                                fontSize: calculateTitleSize(title),
+                            }}
+                        >
+                            {title}
+                        </h1>
                         {children}
                     </div>
                 )}
@@ -128,6 +136,33 @@ export const LibraryHeader = forwardRef(
     },
 );
 
+const calculateTitleSize = (title: string) => {
+    const titleLength = title.length;
+    let baseSize = '3.5dvw';
+
+    if (titleLength > 20) {
+        baseSize = '3dvw';
+    }
+
+    if (titleLength > 30) {
+        baseSize = '2.75dvw';
+    }
+
+    if (titleLength > 40) {
+        baseSize = '2.5dvw';
+    }
+
+    if (titleLength > 50) {
+        baseSize = '2.25dvw';
+    }
+
+    if (titleLength > 60) {
+        baseSize = '2dvw';
+    }
+
+    return `clamp(2rem, ${baseSize}, 3.25rem)`;
+};
+
 interface LibraryHeaderMenuProps {
     favorite?: boolean;
     onFavorite?: (e: React.MouseEvent<HTMLButtonElement>) => void;