Fix alignment and border around small images in a grid with captions (#…

…2229)
GitbookIO · Mar 26, 2024 · a678951 · a678951
1 parent ee7a74f
commit a678951
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/e2e/pages.spec.ts b/e2e/pages.spec.ts
@@ -125,6 +125,7 @@ const testCases: TestsCase[] = [
                 name: 'Images',
                 url: 'blocks/block-images',
                 run: waitForCookiesDialog,
+                fullPage: true,
             },
             {
                 name: 'Inline Images',

diff --git a/src/components/DocumentView/Caption.tsx b/src/components/DocumentView/Caption.tsx
@@ -43,6 +43,7 @@ export function Caption(
             'dark:after:border-light/1',
             'dark:after:mix-blend-plus-lighter',
             'after:pointer-events-none',
+            'w-fit',
         ],
         style,
     } = props;
@@ -60,7 +61,7 @@ export function Caption(
 
     return (
         <picture className={tcls('relative', style)}>
-            <div className={tcls(wrapperStyle)}>{children}</div>
+            <div className={tcls(wrapperStyle, 'mx-auto')}>{children}</div>
             <figcaption
                 className={tcls(
                     'text-sm',