From 164d810eb4aabaa569d77755e0cc624f050e7505 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 9 Sep 2024 23:00:25 +0200
Subject: [PATCH] Decrease manga description collapsed size

Adjust collapsed size to actual description height.
The collapsed size is still set once the element is expanded, which can cause a lot of empty space for short descriptions
---
 src/components/manga/MangaDetails.tsx | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/manga/MangaDetails.tsx b/src/components/manga/MangaDetails.tsx
index 8c728579..1a7550a6 100644
--- a/src/components/manga/MangaDetails.tsx
+++ b/src/components/manga/MangaDetails.tsx
@@ -186,9 +186,18 @@ const DescriptionGenre = ({
 }: {
     manga: Pick<MangaType, 'description' | 'genre'>;
 }) => {
+    const [descriptionElement, setDescriptionElement] = useState<HTMLSpanElement | null>(null);
+    const [descriptionHeight, setDescriptionHeight] = useState<number>();
+    useResizeObserver(
+        descriptionElement,
+        useCallback(() => setDescriptionHeight(descriptionElement?.clientHeight), [descriptionElement]),
+    );
+
     const [isCollapsed, setIsCollapsed] = useLocalStorage('isDescriptionGenreCollapsed', true);
 
-    const collapsedSize = description ? DESCRIPTION_COLLAPSED_SIZE : 0;
+    const collapsedSize = description
+        ? Math.min(DESCRIPTION_COLLAPSED_SIZE, descriptionHeight ?? DESCRIPTION_COLLAPSED_SIZE)
+        : 0;
     const genres = useMemo(() => mangaGenres.filter(Boolean), [mangaGenres]);
 
     return (
@@ -196,7 +205,10 @@ const DescriptionGenre = ({
             {description && (
                 <Stack sx={{ position: 'relative' }}>
                     <Collapse collapsedSize={collapsedSize} in={!isCollapsed}>
-                        <Typography style={{ whiteSpace: 'pre-line', textAlign: 'justify', textJustify: 'inter-word' }}>
+                        <Typography
+                            ref={setDescriptionElement}
+                            style={{ whiteSpace: 'pre-line', textAlign: 'justify', textJustify: 'inter-word' }}
+                        >
                             {description}
                         </Typography>
                     </Collapse>