From a6976d4513a04660cc89220e67b10468f75a960f Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Mon, 9 Sep 2024 14:55:59 +0200
Subject: [PATCH] Show manga description only if available

---
 src/components/manga/MangaDetails.tsx | 49 +++++++++++++++------------
 1 file changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/components/manga/MangaDetails.tsx b/src/components/manga/MangaDetails.tsx
index 2d020329..1670c9e6 100644
--- a/src/components/manga/MangaDetails.tsx
+++ b/src/components/manga/MangaDetails.tsx
@@ -183,31 +183,36 @@ const DescriptionGenre = ({
 }) => {
     const [isCollapsed, setIsCollapsed] = useLocalStorage('isDescriptionGenreCollapsed', true);
 
+    const collapsedSize = description ? DESCRIPTION_COLLAPSED_SIZE : 0;
+
     return (
         <>
-            <Stack sx={{ position: 'relative' }}>
-                <Collapse collapsedSize={DESCRIPTION_COLLAPSED_SIZE} in={!isCollapsed}>
-                    <Typography style={{ whiteSpace: 'pre-line', textAlign: 'justify', textJustify: 'inter-word' }}>
-                        {description}
-                    </Typography>
-                </Collapse>
-                <Stack
-                    onClick={() => setIsCollapsed(!isCollapsed)}
-                    sx={{
-                        pt: 1,
-                        alignItems: 'center',
-                        cursor: 'pointer',
-                        position: isCollapsed ? 'absolute' : null,
-                        width: '100%',
-                        bottom: 0,
-                        background: (theme) => `linear-gradient(transparent 1px, ${theme.palette.background.default})`,
-                    }}
-                >
-                    <IconButton sx={{ color: (theme) => (theme.palette.mode === 'light' ? 'black' : 'text') }}>
-                        {isCollapsed ? <ExpandMoreIcon /> : <ExpandLessIcon />}
-                    </IconButton>
+            {description && (
+                <Stack sx={{ position: 'relative' }}>
+                    <Collapse collapsedSize={collapsedSize} in={!isCollapsed}>
+                        <Typography style={{ whiteSpace: 'pre-line', textAlign: 'justify', textJustify: 'inter-word' }}>
+                            {description}
+                        </Typography>
+                    </Collapse>
+                    <Stack
+                        onClick={() => setIsCollapsed(!isCollapsed)}
+                        sx={{
+                            pt: 1,
+                            alignItems: 'center',
+                            cursor: 'pointer',
+                            position: isCollapsed ? 'absolute' : null,
+                            width: '100%',
+                            bottom: 0,
+                            background: (theme) =>
+                                `linear-gradient(transparent 1px, ${theme.palette.background.default})`,
+                        }}
+                    >
+                        <IconButton sx={{ color: (theme) => (theme.palette.mode === 'light' ? 'black' : 'text') }}>
+                            {isCollapsed ? <ExpandMoreIcon /> : <ExpandLessIcon />}
+                        </IconButton>
+                    </Stack>
                 </Stack>
-            </Stack>
+            )}
             <Stack
                 sx={{
                     flexDirection: 'row',