Fix dialog centering, revert to scrollable image layout

Root cause: global reset (* { margin: 0 }) overrides the UA
stylesheet's margin: auto that centers <dialog>. Fix by restoring
margin: auto on .screenshot-dialog.

Also reverts prev/next navigation back to the simpler scrollable
layout with all images stacked vertically.

Author: danielnaab

src/design/components/lab-card/index.tsx

@@ -90,34 +90,19 @@ export function LabCard({ lab, basePath = '/' }: { lab: FeaturedLab; basePath?:
       {screenshotLinks.map(({ link, id }) => (
         <screenshot-dialog>
           <dialog id={id} class="screenshot-dialog">
-            <div class="screenshot-dialog__header">
-              <span class="screenshot-dialog__counter" aria-live="polite"></span>
-              <button class="screenshot-dialog__close" data-close-dialog aria-label="Close" type="button">
-                &times;
-              </button>
-            </div>
+            <button class="screenshot-dialog__close" data-close-dialog aria-label="Close" type="button">
+              &times;
+            </button>
             <div class="screenshot-dialog__images">
-              {link.images.map((img, i) => (
+              {link.images.map((img) => (
                 <img
                   class="screenshot-dialog__img"
                   src={url(img.src, basePath)}
                   alt={img.alt}
                   loading="lazy"
-                  data-index={i}
-                  hidden={i > 0}
                 />
               ))}
             </div>
-            {link.images.length > 1 ? (
-              <div class="screenshot-dialog__nav">
-                <button class="screenshot-dialog__nav-btn" data-prev type="button" aria-label="Previous screenshot">
-                  &larr; Prev
-                </button>
-                <button class="screenshot-dialog__nav-btn" data-next type="button" aria-label="Next screenshot">
-                  Next &rarr;
-                </button>
-              </div>
-            ) : null}
           </dialog>
         </screenshot-dialog>
       ))}

src/design/components/lab-card/styles.css

@@ -121,29 +121,22 @@
   .screenshot-dialog {
     max-inline-size: min(900px, 90vw);
     max-block-size: 90vh;
+    margin: auto;  /* restore centering lost by global * { margin: 0 } reset */
     border: none;
     border-radius: var(--radius-sm);
     padding: var(--space-6);
     overflow-y: auto;
+    position: relative;
   }
 
   .screenshot-dialog::backdrop {
     background: rgb(0 0 0 / 0.6);
   }
 
-  .screenshot-dialog__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-block-end: var(--space-4);
-  }
-
-  .screenshot-dialog__counter {
-    font-size: var(--step--1);
-    color: var(--color-ink-subtle);
-  }
-
   .screenshot-dialog__close {
+    position: absolute;
+    inset-block-start: var(--space-3);
+    inset-inline-end: var(--space-3);
     background: none;
     border: none;
     font-size: var(--step-3);
@@ -152,7 +145,6 @@
     color: var(--color-ink-subtle);
     padding: var(--space-1) var(--space-2);
     border-radius: var(--radius-sm);
-    margin-inline-start: auto;
   }
 
   .screenshot-dialog__close:hover,
@@ -163,7 +155,8 @@
 
   .screenshot-dialog__images {
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    gap: var(--space-4);
   }
 
   .screenshot-dialog__img {
@@ -172,32 +165,4 @@
     border-radius: var(--radius-sm);
     box-shadow: var(--shadow-card);
   }
-
-  .screenshot-dialog__nav {
-    display: flex;
-    justify-content: space-between;
-    margin-block-start: var(--space-4);
-  }
-
-  .screenshot-dialog__nav-btn {
-    background: none;
-    border: 1px solid var(--color-surface-alt);
-    border-radius: var(--radius-sm);
-    padding: var(--space-2) var(--space-4);
-    cursor: pointer;
-    font: inherit;
-    font-size: var(--step--1);
-    color: var(--color-link);
-  }
-
-  .screenshot-dialog__nav-btn:hover,
-  .screenshot-dialog__nav-btn:focus-visible {
-    background: var(--color-surface-alt);
-    color: var(--color-link-hover);
-  }
-
-  .screenshot-dialog__nav-btn:disabled {
-    opacity: 0.4;
-    cursor: default;
-  }
 }

src/design/components/screenshot-dialog/client.ts

@@ -1,59 +1,27 @@
 class ScreenshotDialogElement extends HTMLElement {
   private dialog: HTMLDialogElement | null = null
-  private images: HTMLImageElement[] = []
-  private current = 0
 
   connectedCallback() {
     this.dialog = this.querySelector('dialog')
     if (!this.dialog) return
 
-    this.images = Array.from(this.dialog.querySelectorAll('.screenshot-dialog__img'))
     this.dialog.addEventListener('click', this.handleBackdropClick)
 
     this.dialog.querySelector('[data-close-dialog]')
       ?.addEventListener('click', () => this.dialog?.close())
 
-    this.dialog.querySelector('[data-prev]')
-      ?.addEventListener('click', () => this.show(this.current - 1))
-
-    this.dialog.querySelector('[data-next]')
-      ?.addEventListener('click', () => this.show(this.current + 1))
-
     // Find the button that opens this dialog (outside this element, in the card)
     const dialogId = this.dialog.id
     if (dialogId) {
       const opener = document.querySelector(`[data-open-dialog="${dialogId}"]`)
-      opener?.addEventListener('click', () => {
-        this.show(0)
-        this.dialog?.showModal()
-      })
+      opener?.addEventListener('click', () => this.dialog?.showModal())
     }
   }
 
   disconnectedCallback() {
     this.dialog?.removeEventListener('click', this.handleBackdropClick)
   }
 
-  private show(index: number) {
-    if (index < 0 || index >= this.images.length) return
-    this.current = index
-
-    for (const img of this.images) {
-      img.hidden = true
-    }
-    this.images[index].hidden = false
-
-    const counter = this.dialog?.querySelector('.screenshot-dialog__counter')
-    if (counter && this.images.length > 1) {
-      counter.textContent = `${index + 1} of ${this.images.length}`
-    }
-
-    const prev = this.dialog?.querySelector('[data-prev]') as HTMLButtonElement | null
-    const next = this.dialog?.querySelector('[data-next]') as HTMLButtonElement | null
-    if (prev) prev.disabled = index === 0
-    if (next) next.disabled = index === this.images.length - 1
-  }
-
   handleBackdropClick = (e: Event) => {
     if (e.target === this.dialog) {
       this.dialog.close()

tests/views/components.test.tsx

@@ -186,19 +186,13 @@ describe('LabCard', () => {
     expect(html).not.toContain('href="/assets/images/')
   })
 
-  test('screenshot link renders a dialog with images and nav buttons', async () => {
+  test('screenshot link renders a dialog with images', async () => {
     const html = await renderToHtml(<LabCard lab={withScreenshots} />)
     expect(html).toContain('<dialog')
     expect(html).toContain('src="/assets/images/messaging-dashboard.png"')
     expect(html).toContain('alt="Dashboard"')
     expect(html).toContain('src="/assets/images/messaging-get-started.png"')
     expect(html).toContain('alt="Get started"')
-    // First image visible, second hidden
-    expect(html).toContain('data-index="0"')
-    expect(html).toContain('data-index="1"')
-    // Prev/next nav buttons
-    expect(html).toContain('data-prev')
-    expect(html).toContain('data-next')
   })
 
   test('screenshot image src respects basePath', async () => {