Fix invisible Dialog demos: give them layout="stack" so the flex row doesn't collapse them to zero width
The dialog demo's only in-flow child is position: absolute (the overlay),
so .ad-dialog-demo had no intrinsic width as a default row flex item and
rendered as an empty sliver. The stack layout already used elsewhere for
full-width examples (e.g. Button's block variant) fixes it by stretching
the item to the row's cross-axis.
change
commit 3fe11d17c8a2072fd211cd5665af40b6fd640539
author Claude <noreply@anthropic.com>
date
parent bb6ef5c4
diff --git a/_components/dialog.md b/_components/dialog.md
index 0ca41d0..a2bf7c7 100644
--- a/_components/dialog.md
+++ b/_components/dialog.md
@@ -11,7 +11,7 @@ documentation page. Wire real open/close state — and a `position: fixed`
 overlay — in the consuming app; this is a pixel recreation for documentation,
 not a functioning modal.
 
-<% example(title: "Dialog", open: true) do %>
+<% example(title: "Dialog", open: true, layout: "stack") do %>
 <div class="ad-dialog-demo">
   <div class="ad-dialog__overlay">
     <div class="ad-dialog">
@@ -30,7 +30,7 @@ not a functioning modal.
 
 A body-only dialog for a notice rather than a decision.
 
-<% example(title: "No footer") do %>
+<% example(title: "No footer", layout: "stack") do %>
 <div class="ad-dialog-demo" style="min-height: 14rem;">
   <div class="ad-dialog__overlay">
     <div class="ad-dialog" style="width: 20rem;">
diff --git a/_patterns/loop.md b/_patterns/loop.md
index 19f8b81..842caff 100644
--- a/_patterns/loop.md
+++ b/_patterns/loop.md
@@ -105,7 +105,7 @@ beyond a couple of inline widths.
 
 ## The New series dialog
 
-<% example(title: "New series", no_source: true) do %>
+<% example(title: "New series", no_source: true, layout: "stack") do %>
 <div class="ad-dialog-demo" style="min-height: 18rem;">
   <div class="ad-dialog__overlay">
     <div class="ad-dialog" style="width: 22rem;">