From 882638b7c1bb8b7f0840610cb5aa9a0481026cb9 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Fri, 11 Apr 2025 22:41:48 +0200
Subject: [PATCH] Fix jumpiness of manga description collapse/expand button

---
 src/modules/manga/components/MangaDetails.tsx | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/modules/manga/components/MangaDetails.tsx b/src/modules/manga/components/MangaDetails.tsx
index bafd3ea3..8dcb8811 100644
--- a/src/modules/manga/components/MangaDetails.tsx
+++ b/src/modules/manga/components/MangaDetails.tsx
@@ -288,6 +288,7 @@ const Thumbnail = ({
     );
 };
 
+const OPEN_CLOSE_BUTTON_HEIGHT = '35px';
 const DESCRIPTION_COLLAPSED_SIZE = 75;
 const DescriptionGenre = ({
     manga: { description, genre: mangaGenres },
@@ -315,7 +316,12 @@ const DescriptionGenre = ({
                     <Collapse collapsedSize={collapsedSize} in={!isCollapsed}>
                         <Typography
                             ref={setDescriptionElement}
-                            style={{ whiteSpace: 'pre-line', textAlign: 'justify', textJustify: 'inter-word' }}
+                            sx={{
+                                whiteSpace: 'pre-line',
+                                textAlign: 'justify',
+                                textJustify: 'inter-word',
+                                mb: OPEN_CLOSE_BUTTON_HEIGHT,
+                            }}
                         >
                             {description}
                         </Typography>
@@ -323,14 +329,15 @@ const DescriptionGenre = ({
                     <Stack
                         onClick={() => setIsCollapsed(!isCollapsed)}
                         sx={{
-                            pt: 1,
+                            justifyContent: 'flex-start',
                             alignItems: 'center',
                             cursor: 'pointer',
-                            position: isCollapsed ? 'absolute' : null,
+                            position: 'absolute',
                             width: '100%',
+                            height: OPEN_CLOSE_BUTTON_HEIGHT,
                             bottom: 0,
                             background: (theme) =>
-                                `linear-gradient(transparent 1px, ${theme.palette.background.default})`,
+                                `linear-gradient(transparent -15px, ${theme.palette.background.default})`,
                         }}
                     >
                         <IconButton sx={{ color: (theme) => (theme.palette.mode === 'light' ? 'black' : 'text') }}>