Prevent "ReaderChapterViewer" from overlapping each other

Seems like not all browsers handle

width/height: 100%
min-width/min-height: fit-content

correctly.
the "min" setting just never applies and the size is stuck at 100%.
This commit is contained in:
schroda
2025-02-04 23:11:34 +01:00
parent 36cb545156
commit 636f48107f
2 changed files with 2 additions and 8 deletions

View File

@@ -344,10 +344,8 @@ const BaseReaderChapterViewer = ({
return (
<Stack
sx={{
width: '100%',
minWidth: 'fit-content',
height: '100%',
minHeight: 'fit-content',
width: 'fit-content',
height: 'fit-content',
margin: 'auto',
flexWrap: 'nowrap',
...applyStyles(shouldHideChapter, {

View File

@@ -141,14 +141,10 @@ const BaseReaderTransitionPage = ({
transform: 'scale(1)',
...applyStyles(isContinuousVerticalReadingMode(readingMode), {
minHeight: `calc(100vh - ${scrollbarXSize}px)`,
maxWidth: '100%',
width: '100%',
...applyStyles(!isFitWidthPageScaleMode, { alignItems: 'baseline' }),
}),
...applyStyles(readingMode === ReadingMode.CONTINUOUS_HORIZONTAL, {
minWidth: `calc(100vw - ${scrollbarYSize}px - ${readerNavBarWidth}px)`,
maxHeight: '100%',
height: '100%',
justifyContent: 'unset',
}),
}),