From b0dd7b7ad4a37ac88e5ade690617ecf7b8e8ce64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=89mile=20R=C3=A9?= <emile@probo.com>
Date: Wed, 15 Jul 2026 13:30:36 +0200
Subject: [PATCH] Show dialog skeleton over a backdrop in Storybook
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The skeleton frame carries the dialog's shadow-6 elevation, which only
reads correctly against the dimmed overlay. Render the story over a
simulated backdrop so the preview matches how the dialog appears.

Signed-off-by: Émile Ré <emile@probo.com>
---
 packages/ui/src/v2/Dialog/Dialog.stories.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/v2/Dialog/Dialog.stories.tsx b/packages/ui/src/v2/Dialog/Dialog.stories.tsx
index 2f615a365..4db71b29d 100644
--- a/packages/ui/src/v2/Dialog/Dialog.stories.tsx
+++ b/packages/ui/src/v2/Dialog/Dialog.stories.tsx
@@ -97,9 +97,11 @@ export function Controlled() {
   );
 }
 
+// Shown over a simulated backdrop, matching how the dialog actually appears —
+// the frame's elevation only reads correctly against the dimmed overlay.
 export function Skeleton() {
   return (
-    <div className="flex justify-center">
+    <div className="flex min-h-[420px] items-center justify-center rounded-4 bg-sand-12/40 p-8">
       <DialogSkeleton />
     </div>
   );