Fixes

Author: viktorrenkema

package.json

@@ -34,7 +34,7 @@
     "workspaces": {
         "packages": ["packages/*"],
         "catalog": {
-            "@gitbook/api": "^0.138.0",
+            "@gitbook/api": "^0.139.0",
             "bidc": "^0.0.2"
         }
     },

packages/gitbook/src/components/DocumentView/Table/RecordCard.tsx

@@ -3,6 +3,7 @@ import { Image } from '@/components/utils';
 import { type ResolvedContentRef, resolveContentRef } from '@/lib/references';
 import { tcls } from '@/lib/tailwind';
 import {
+    type CardsImageObjectFit,
     type ContentRef,
     type DocumentTableViewCards,
     SiteInsightsLinkPosition,
@@ -39,6 +40,14 @@ export async function RecordCard(
     const darkCoverIsSquareOrPortrait = isSquareOrPortrait(darkCover);
     const lightCoverIsSquareOrPortrait = isSquareOrPortrait(lightCover);
 
+    const darkObjectFit = dark.objectFit
+        ? `dark:${getObjectFitClass(dark.objectFit as CardsImageObjectFit)}`
+        : '';
+    const lightObjectFit = light.objectFit
+        ? getObjectFitClass(light.objectFit as CardsImageObjectFit)
+        : '';
+    const objectFits = `${lightObjectFit} ${darkObjectFit}`;
+
     const body = (
         <div
             className={tcls(
@@ -99,11 +108,6 @@ export async function RecordCard(
                         'w-full',
                         'h-full',
                         'bg-tint-subtle',
-                        getObjectFitClass(light.objectFit),
-                        // Apply dark mode object-fit if different from light
-                        dark.objectFit && dark.objectFit !== light.objectFit
-                            ? `dark:${getObjectFitClass(dark.objectFit)}`
-                            : '',
                         lightCoverIsSquareOrPortrait || darkCoverIsSquareOrPortrait
                             ? [
                                   lightCoverIsSquareOrPortrait
@@ -113,7 +117,8 @@ export async function RecordCard(
                                       ? 'dark:min-[432px]:aspect-video dark:min-[432px]:h-auto'
                                       : '',
                               ].filter(Boolean)
-                            : ['h-auto', 'aspect-video']
+                            : ['h-auto', 'aspect-video'],
+                        objectFits
                     )}
                     priority={isOffscreen ? 'lazy' : 'high'}
                     preload
@@ -203,13 +208,15 @@ function isSquareOrPortrait(contentRef: ResolvedContentRef | null) {
 /**
  * Get the CSS class for object-fit based on the objectFit value.
  */
-function getObjectFitClass(objectFit?: string): string {
+function getObjectFitClass(objectFit?: CardsImageObjectFit): string {
     switch (objectFit) {
         case 'contain':
             return 'object-contain';
         case 'fill':
             return 'object-fill';
-        default:
+        case 'cover':
             return 'object-cover';
+        default:
+            throw new Error(`Unsupported object fit: ${objectFit}`);
     }
 }

packages/gitbook/src/components/DocumentView/Table/utils.ts

@@ -3,20 +3,10 @@ import type {
     ContentRefFile,
     ContentRefURL,
     DocumentTableDefinition,
+    DocumentTableImageRecord,
     DocumentTableRecord,
     DocumentTableViewCards,
 } from '@gitbook/api';
-
-/**
- * Cover value can be either a direct ContentRef or an object with objectFit and ref
- */
-export type CoverValue =
-    | ContentRefFile
-    | ContentRefURL
-    | {
-          objectFit: string;
-          ref: ContentRefFile | ContentRefURL;
-      };
 import assertNever from 'assert-never';
 
 /**
@@ -46,11 +36,11 @@ export function getRecordCardCovers(
     };
 } {
     const lightValue = view.coverDefinition
-        ? (getRecordValue(record, view.coverDefinition) as CoverValue | string[])
+        ? (getRecordValue(record, view.coverDefinition) as DocumentTableImageRecord | string[])
         : null;
 
     const darkValue = view.coverDefinitionDark
-        ? (getRecordValue(record, view.coverDefinitionDark) as CoverValue)
+        ? (getRecordValue(record, view.coverDefinitionDark) as DocumentTableImageRecord)
         : null;
 
     return {
@@ -62,7 +52,7 @@ export function getRecordCardCovers(
 /**
  * Process a cover value and return the content ref and object fit.
  */
-function processCoverValue(value: CoverValue | string[] | null | undefined): {
+function processCoverValue(value: DocumentTableImageRecord | string[] | null | undefined): {
     contentRef: ContentRefFile | ContentRefURL | null;
     objectFit?: string;
 } {