From a6789513dcd73241484f5b2076bb771ce25eefb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samy=20Pess=C3=A9?= <samypesse@gmail.com>
Date: Tue, 26 Mar 2024 12:45:23 +0000
Subject: [PATCH] Fix alignment and border around small images in a grid with
 captions (#2229)

---
 e2e/pages.spec.ts                       | 1 +
 src/components/DocumentView/Caption.tsx | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/e2e/pages.spec.ts b/e2e/pages.spec.ts
index 4b1c70dcd..fc91608ab 100644
--- 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
index 61b0ffcbd..df6df549e 100644
--- 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',