Preserve existing sizing when no height is set

Author: viktorrenkema

packages/gitbook/src/components/PageBody/PageCover.tsx

@@ -25,34 +25,23 @@ export async function PageCover(props: {
     const { as, page, cover, context } = props;
     const height = getCoverHeight(cover);
 
-    if (!height) {
-        return null;
-    }
-
     const [resolved, resolvedDark] = await Promise.all([
         cover.ref ? resolveContentRef(cover.ref, context) : null,
         cover.refDark ? resolveContentRef(cover.refDark, context) : null,
     ]);
 
-    // Calculate sizes based on cover type and page layout
-    // Hero covers: max-w-3xl (768px) on regular pages, max-w-screen-2xl (1536px) on wide pages
-    // Full covers: Can expand to full viewport width with negative margins (up to ~1920px+ on large screens)
-    const isWidePage = page.layout.width === 'wide';
-    const maxWidth = as === 'full' ? 1920 : isWidePage ? 1536 : 768;
-
     const sizes = [
-        // Cover takes the full width on mobile
+        // Cover takes the full width on mobile/table
         {
             media: '(max-width: 768px)',
             width: 768,
         },
-        // Tablet sizes
         {
             media: '(max-width: 1024px)',
             width: 1024,
         },
-        // Maximum size based on cover type and page layout
-        { width: maxWidth },
+        // Maximum size of the cover
+        { width: 1248 },
     ];
 
     const getImage = async (resolved: ResolvedContentRef | null, returnNull = false) => {

packages/gitbook/src/components/PageBody/PageCoverImage.tsx

@@ -1,7 +1,6 @@
 'use client';
 import { tcls } from '@/lib/tailwind';
 import type { ImageSize } from '../utils';
-import { getRecommendedCoverDimensions } from './coverDimensions';
 import { useCoverPosition } from './useCoverPosition';
 
 interface ImageAttributes {
@@ -18,14 +17,18 @@ interface Images {
     dark?: ImageAttributes;
 }
 
-export function PageCoverImage({ imgs, y, height }: { imgs: Images; y: number; height: number }) {
-    const { containerRef, objectPositionY, isLoading } = useCoverPosition(imgs, y);
+const PAGE_COVER_SIZE: ImageSize = { width: 1990, height: 480 };
+
+interface PageCoverImageProps {
+    imgs: Images;
+    y: number;
+    // Only if the `height` was customized by the user (and thus defined), we use it to set the cover's height and skip the default behaviour of fixed aspect-ratio.
+    height: number | undefined;
+}
 
-    // Calculate the recommended aspect ratio for this height
-    // This maintains the 4:1 ratio, allowing images to scale proportionally
-    // and adapt their height when container width doesn't match the ideal ratio
-    const recommendedDimensions = getRecommendedCoverDimensions(height);
-    const aspectRatio = recommendedDimensions.width / recommendedDimensions.height;
+export function PageCoverImage(props: PageCoverImageProps) {
+    const { imgs, y, height } = props;
+    const { containerRef, objectPositionY, isLoading } = useCoverPosition(imgs, y);
 
     if (isLoading) {
         return (
@@ -45,8 +48,11 @@ export function PageCoverImage({ imgs, y, height }: { imgs: Images; y: number; h
                 alt="Page cover"
                 className={tcls('w-full', 'object-cover', imgs.dark ? 'dark:hidden' : '')}
                 style={{
-                    aspectRatio: `${aspectRatio}`,
+                    aspectRatio: height
+                        ? undefined
+                        : `${PAGE_COVER_SIZE.width}/${PAGE_COVER_SIZE.height}`,
                     objectPosition: `50% ${objectPositionY}%`,
+                    height, // if no height is passed, no height will be set.
                 }}
             />
             {imgs.dark && (
@@ -58,8 +64,11 @@ export function PageCoverImage({ imgs, y, height }: { imgs: Images; y: number; h
                     alt="Page cover"
                     className={tcls('w-full', 'object-cover', 'dark:inline', 'hidden')}
                     style={{
-                        aspectRatio: `${aspectRatio}`,
+                        aspectRatio: height
+                            ? undefined
+                            : `${PAGE_COVER_SIZE.width}/${PAGE_COVER_SIZE.height}`,
                         objectPosition: `50% ${objectPositionY}%`,
+                        height, // if no height is passed, no height will be set.
                     }}
                 />
             )}

packages/gitbook/src/components/PageBody/coverDimensions.ts

@@ -13,11 +13,12 @@ function clampCoverHeight(height: number | null | undefined): number {
     return Math.min(MAX_COVER_HEIGHT, Math.max(MIN_COVER_HEIGHT, height));
 }
 
+// When a user set a custom cover height, we return the clamped cover height. If no height is set, we want to preserve the existing logic for sizing of the cover image and return `undefined` for height.
 export function getCoverHeight(
     cover: RevisionPageDocumentCover | null | undefined
 ): number | undefined {
     // Cover (and thus height) is not defined
-    if (!cover) {
+    if (!cover || !cover.height) {
         return undefined;
     }