Set static size for manga details page covers

src/modules/manga/Manga.constants.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright (C) Contributors to the Suwayomi project
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+export const MANGA_COVER_ASPECT_RATIO = '1 / 1.5';

src/modules/manga/components/MangaDetails.tsx

@@ -44,6 +44,7 @@ import { useLocalStorage } from '@/modules/core/hooks/useStorage.tsx';
 import { useResizeObserver } from '@/modules/core/hooks/useResizeObserver.tsx';
 import { useMetadataServerSettings } from '@/modules/settings/services/ServerSettingsMetadata.ts';
 import { shouldForwardProp } from '@/modules/core/utils/ShouldForwardProp.ts';
+import { MANGA_COVER_ASPECT_RATIO } from '@/modules/manga/Manga.constants.ts';
 
 const DetailsWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -141,15 +142,7 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
 
     const popupState = usePopupState({ variant: 'popover', popupId: 'manga-thumbnail-fullscreen' });
 
-    const [imageHeight, setImageHeight] = useState<number>();
-    const [imageElement, setImageElement] = useState<HTMLImageElement | null>(null);
-    useResizeObserver(
-        imageElement,
-        useCallback(() => setImageHeight(imageElement?.clientHeight), [imageElement]),
-    );
-
     const [isImageReady, setIsImageReady] = useState(false);
-    const isImageHeightReady = isImageReady && !!imageHeight;
 
     return (
         <>
@@ -160,23 +153,23 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
                     overflow: 'hidden',
                     backgroundColor: 'background.paper',
                     width: '150px',
-                    height: `${isImageHeightReady ? imageHeight : 225}px`,
+                    maxHeight: 'fit-content',
+                    aspectRatio: MANGA_COVER_ASPECT_RATIO,
                     flexShrink: 0,
+                    flexGrow: 0,
                     [theme.breakpoints.up('lg')]: {
                         width: '200px',
-                        height: `${isImageHeightReady ? imageHeight : 300}px`,
                     },
                     [theme.breakpoints.up('xl')]: {
                         width: '300px',
-                        height: `${isImageHeightReady ? imageHeight : 450}px`,
                     },
                 }}
             >
                 <SpinnerImage
-                    ref={setImageElement}
                     src={Mangas.getThumbnailUrl(manga)}
                     alt="Manga Thumbnail"
                     onImageLoad={() => setIsImageReady(true)}
+                    imgStyle={{ width: '100%', height: '100%', objectFit: 'cover' }}
                 />
                 {isImageReady && (
                     <Stack
@@ -203,7 +196,7 @@ const Thumbnail = ({ manga }: { manga: Partial<MangaThumbnailInfo> }) => {
             <Modal {...bindPopover(popupState)} sx={{ outline: 0 }}>
                 <Stack
                     onClick={() => popupState.close()}
-                    sx={{ height: '100vh', py: 2, outline: 0, justifyContent: 'center', alignItems: 'center' }}
+                    sx={{ height: '100vh', p: 2, outline: 0, justifyContent: 'center', alignItems: 'center' }}
                 >
                     <SpinnerImage
                         src={Mangas.getThumbnailUrl(manga)}

src/modules/manga/components/cards/MangaGridCard.tsx

@@ -21,6 +21,7 @@ import { GridLayout } from '@/modules/library/contexts/LibraryOptionsContext.tsx
 import { Mangas } from '@/modules/manga/services/Mangas.ts';
 import { SpecificMangaCardProps } from '@/modules/manga/MangaCard.types.tsx';
 import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines.tsx';
+import { MANGA_COVER_ASPECT_RATIO } from '@/modules/manga/Manga.constants.ts';
 
 const BottomGradient = styled('div')({
     position: 'absolute',
@@ -92,7 +93,7 @@ export const MangaGridCard = ({
                 <Card
                     sx={{
                         // force standard aspect ratio of manga covers
-                        aspectRatio: '225/350',
+                        aspectRatio: MANGA_COVER_ASPECT_RATIO,
                         display: 'flex',
                     }}
                 >

src/modules/tracker/components/cards/TrackerMangaCard.tsx

@@ -27,6 +27,7 @@ import { TypographyMaxLines } from '@/modules/core/components/TypographyMaxLines
 import { Metadata } from '@/modules/core/components/Metadata.tsx';
 import { MediaQuery } from '@/modules/core/utils/MediaQuery.tsx';
 import { TTrackerManga } from '@/modules/tracker/services/Trackers.ts';
+import { MANGA_COVER_ASPECT_RATIO } from '@/modules/manga/Manga.constants.ts';
 
 const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
     <Stack
@@ -141,7 +142,7 @@ export const TrackerMangaCard = ({
                         >
                             <CardMedia
                                 sx={{
-                                    aspectRatio: '225/350',
+                                    aspectRatio: MANGA_COVER_ASPECT_RATIO,
                                     minWidth: '100px',
                                     width: '150px',
                                     borderRadius: 1,