Only allow resizing on 'full', not 'hero' covers

Author: viktorrenkema

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

@@ -22,8 +22,9 @@ export async function PageCover(props: {
     cover: RevisionPageDocumentCover;
     context: GitBookSiteContext;
 }) {
-    const { as, page, cover, context } = props;
-    const height = getCoverHeight(cover);
+    const { as: coverType, page, cover, context } = props;
+
+    const height = getCoverHeight(cover, coverType);
 
     if (!height) {
         return null;
@@ -34,25 +35,18 @@ export async function PageCover(props: {
         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) => {
@@ -91,12 +85,12 @@ export async function PageCover(props: {
     return (
         <div
             id="page-cover"
-            data-full={String(as === 'full')}
+            data-full={String(coverType === 'full')}
             className={tcls(
                 'overflow-hidden',
                 // Negative margin to balance the container padding
                 '-mx-4',
-                as === 'full'
+                coverType === 'full'
                     ? [
                           'sm:-mx-6',
                           'md:-mx-8',
@@ -123,6 +117,7 @@ export async function PageCover(props: {
                 }}
                 y={cover.yPos}
                 height={height}
+                coverType={coverType}
             />
         </div>
     );

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,15 @@ 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 };
 
-    // 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({
+    imgs,
+    y,
+    height,
+    coverType,
+}: { imgs: Images; y: number; height: number; coverType: 'hero' | 'full' }) {
+    const { containerRef, objectPositionY, isLoading } = useCoverPosition(imgs, y);
 
     if (isLoading) {
         return (
@@ -36,17 +36,23 @@ export function PageCoverImage({ imgs, y, height }: { imgs: Images; y: number; h
     }
 
     return (
-        <div className="h-full w-full overflow-hidden" ref={containerRef} style={{ height }}>
+        <div className="h-full w-full overflow-hidden" ref={containerRef}>
             <img
                 src={imgs.light.src}
                 srcSet={imgs.light.srcSet}
                 sizes={imgs.light.sizes}
                 fetchPriority="high"
                 alt="Page cover"
-                className={tcls('w-full', 'object-cover', imgs.dark ? 'dark:hidden' : '')}
+                className={tcls(
+                    'w-full',
+                    coverType === 'hero' ? 'object-contain' : 'object-cover',
+                    imgs.dark ? 'dark:hidden' : ''
+                )}
                 style={{
-                    aspectRatio: `${aspectRatio}`,
+                    aspectRatio:
+                        coverType === 'hero' ? `${height}/${PAGE_COVER_SIZE.height}` : undefined,
                     objectPosition: `50% ${objectPositionY}%`,
+                    height: coverType === 'full' ? `${height}px` : undefined,
                 }}
             />
             {imgs.dark && (
@@ -58,7 +64,7 @@ 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: `${PAGE_COVER_SIZE.width}/${PAGE_COVER_SIZE.height}`,
                         objectPosition: `50% ${objectPositionY}%`,
                     }}
                 />

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

@@ -14,12 +14,17 @@ function clampCoverHeight(height: number | null | undefined): number {
 }
 
 export function getCoverHeight(
-    cover: RevisionPageDocumentCover | null | undefined
+    cover: RevisionPageDocumentCover | null | undefined,
+    as: 'hero' | 'full'
 ): number | undefined {
     // Cover (and thus height) is not defined
     if (!cover) {
         return undefined;
     }
 
+    if (as === 'hero') {
+        return DEFAULT_COVER_HEIGHT;
+    }
+
     return clampCoverHeight((cover as RevisionPageDocumentCover).height ?? DEFAULT_COVER_HEIGHT);
 }