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

e2e/pages.spec.ts

@@ -125,6 +125,7 @@ const testCases: TestsCase[] = [
                 name: 'Images',
                 url: 'blocks/block-images',
                 run: waitForCookiesDialog,
+                fullPage: true,
             },
             {
                 name: 'Inline Images',

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',