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 0ab6549a20 due to changing the line height of the chapter name
This commit is contained in:
schroda
2024-05-23 13:52:45 +02:00
parent 1b408c8065
commit af9e77524b

View File

@@ -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>