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 0ab6549 due to changing the line height of the chapter name
Suwayomi · May 23, 2024 · af9e775 · af9e775
1 parent 1b408c8
commit af9e775
Showing 1 changed file with 21 additions and 19 deletions.
diff --git 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>