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
Suwayomi · Sep 9, 2024 · 164d810 · 164d810
1 parent aa628c7
commit 164d810
Showing 1 changed file with 14 additions and 2 deletions.
diff --git a/src/components/manga/MangaDetails.tsx b/src/components/manga/MangaDetails.tsx
@@ -186,17 +186,29 @@ 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 (
         <>
             {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>