vrr/readest
2
0
Fork 0
mirror of https://github.com/readest/readest.git synced 2026-05-20 01:01:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

fix(footnote): responsive popup size so that on small screen it won't overflow (#2644)

Browse source
This commit is contained in:
Huang Xin 2025-12-08 14:40:30 +08:00 • committed by GitHub
parent ba3f060cc4
commit 3c7d95cf10
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 13 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
apps/readest-app/src/app/reader/components/FootnotePopup.tsx
View file

@ -48,6 +48,14 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
return Math.min(size, maxSize - popupPadding - 12);
};
const clipPopupWith = (size: number) => {
return Math.min(size, window.innerWidth - popupPadding - 12);
};
const clipPopupHeight = (size: number) => {
return Math.min(size, window.innerHeight - popupPadding - 12);
};
useEffect(() => {
const handleBeforeRender = (e: Event) => {
const detail = (e as CustomEvent).detail;
@ -100,7 +108,9 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
const viewSettings = getViewSettings(bookKey)!;
if (viewSettings.vertical) {
setResponsiveWidth(getResponsivePopupSize(renderer.viewSize, true));
setResponsiveHeight(clipPopupHeight(popupHeight));
} else {
setResponsiveWidth(clipPopupWith(popupWidth));
setResponsiveHeight(getResponsivePopupSize(renderer.viewSize, false));
}
setShowPopup(true);
@ -124,11 +134,11 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
useEffect(() => {
if (viewSettings.vertical) {
setResponsiveWidth(popupHeight);
setResponsiveWidth(clipPopupWith(popupHeight));
setResponsiveHeight(Math.max(popupWidth, window.innerHeight / 4));
} else {
setResponsiveWidth(Math.max(popupWidth, window.innerWidth / 4));
setResponsiveHeight(popupHeight);
setResponsiveHeight(clipPopupHeight(popupHeight));
}
}, [viewSettings]);
@ -250,7 +260,7 @@ const FootnotePopup: React.FC<FootnotePopupProps> = ({ bookKey, bookDoc }) => {
onDismiss={handleDismissPopup}
>
<div
className=''
className='footnote-content'
ref={footnoteRef}
style={{
width: `${responsiveWidth}px`,