autosize library item text

package-lock.json

@@ -28,6 +28,7 @@
                 "@tanstack/react-query-persist-client": "^4.32.1",
                 "@ts-rest/core": "^3.23.0",
                 "@xhayper/discord-rpc": "^1.0.24",
+                "auto-text-size": "^0.2.3",
                 "axios": "^1.6.0",
                 "clsx": "^2.0.0",
                 "cmdk": "^0.2.0",
@@ -6805,6 +6806,15 @@
                 "node": ">=10.12.0"
             }
         },
+        "node_modules/auto-text-size": {
+            "version": "0.2.3",
+            "resolved": "https://registry.npmjs.org/auto-text-size/-/auto-text-size-0.2.3.tgz",
+            "integrity": "sha512-OycpKD8n5jxnNaOiAJoNr3BkBsxRzHHhFQk15rgsOYq+O9lsMSPLbVN7ZibxjTwT7bl6Y5jawOtZJxRWaoxdcQ==",
+            "license": "MIT",
+            "peerDependencies": {
+                "react": "*"
+            }
+        },
         "node_modules/available-typed-arrays": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -28874,6 +28884,11 @@
             "resolved": "https://registry.npmjs.org/atomically/-/atomically-1.7.0.tgz",
             "integrity": "sha512-Xcz9l0z7y9yQ9rdDaxlmaI4uJHf/T8g9hOEzJcsEqX2SjCj4J20uK7+ldkDHMbpJDK76wF7xEIgxc/vSlsfw5w=="
         },
+        "auto-text-size": {
+            "version": "0.2.3",
+            "resolved": "https://registry.npmjs.org/auto-text-size/-/auto-text-size-0.2.3.tgz",
+            "integrity": "sha512-OycpKD8n5jxnNaOiAJoNr3BkBsxRzHHhFQk15rgsOYq+O9lsMSPLbVN7ZibxjTwT7bl6Y5jawOtZJxRWaoxdcQ=="
+        },
         "available-typed-arrays": {
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",

package.json

@@ -309,6 +309,7 @@
         "@tanstack/react-query-persist-client": "^4.32.1",
         "@ts-rest/core": "^3.23.0",
         "@xhayper/discord-rpc": "^1.0.24",
+        "auto-text-size": "^0.2.3",
         "axios": "^1.6.0",
         "clsx": "^2.0.0",
         "cmdk": "^0.2.0",

src/renderer/features/shared/components/library-header.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, ReactNode, Ref, useState } from 'react';
 import { Group } from '@mantine/core';
+import { AutoTextSize } from 'auto-text-size';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import styles from './library-header.module.scss';
@@ -81,7 +82,9 @@ export const LibraryHeader = forwardRef(
                             {itemTypeString()}
                         </Text>
                     </Group>
-                    <h1 className={styles.title}>{title}</h1>
+                    <h1 className={styles.title}>
+                        <AutoTextSize mode="box">{title}</AutoTextSize>
+                    </h1>
                     {children}
                 </div>
             </div>