From af9e77524bf72a74e2da31a7c734d12f35c19db9 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Thu, 23 May 2024 13:52:45 +0200
Subject: [PATCH] Prevent ChapterCard height change on selection

Due to the Checkbox being smaller than the vertical menu icon the ChapterCard was reduced in height, which caused the chapters in the list to jump up sightly.

This issue was introduced by 0ab6549a2092d1bcfe24b6604ab473e4a2b222d2 due to changing the line height of the chapter name
---
 src/components/chapter/ChapterCard.tsx | 40 ++++++++++++++------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/components/chapter/ChapterCard.tsx b/src/components/chapter/ChapterCard.tsx
index 5ec3043a..ef440fd5 100644
--- a/src/components/chapter/ChapterCard.tsx
+++ b/src/components/chapter/ChapterCard.tsx
@@ -128,26 +128,28 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
 
                                     {dc && <DownloadStateIndicator download={dc} />}
 
-                                    {selected === null ? (
-                                        <Tooltip title={t('global.button.options')}>
-                                            <IconButton
-                                                ref={menuButtonRef}
-                                                {...bindTrigger(popupState)}
-                                                onClick={(e) => handleClickOpenMenu(e, popupState.open)}
-                                                onTouchStart={(e) => handleClickOpenMenu(e, popupState.open)}
-                                                aria-label="more"
-                                                size="large"
+                                    <Stack sx={{ minHeight: '48px' }}>
+                                        {selected === null ? (
+                                            <Tooltip title={t('global.button.options')}>
+                                                <IconButton
+                                                    ref={menuButtonRef}
+                                                    {...bindTrigger(popupState)}
+                                                    onClick={(e) => handleClickOpenMenu(e, popupState.open)}
+                                                    onTouchStart={(e) => handleClickOpenMenu(e, popupState.open)}
+                                                    aria-label="more"
+                                                    size="large"
+                                                >
+                                                    <MoreVertIcon />
+                                                </IconButton>
+                                            </Tooltip>
+                                        ) : (
+                                            <Tooltip
+                                                title={t(selected ? 'global.button.deselect' : 'global.button.select')}
                                             >
-                                                <MoreVertIcon />
-                                            </IconButton>
-                                        </Tooltip>
-                                    ) : (
-                                        <Tooltip
-                                            title={t(selected ? 'global.button.deselect' : 'global.button.select')}
-                                        >
-                                            <Checkbox checked={selected} />
-                                        </Tooltip>
-                                    )}
+                                                <Checkbox checked={selected} />
+                                            </Tooltip>
+                                        )}
+                                    </Stack>
                                 </CardContent>
                             </CardActionArea>
                         </Card>