refactor(client): position the lightbox in a stage below the Windows caption

apps/web/tests/markdown-images.e2e.ts

@@ -289,7 +289,7 @@ describe('web e2e: Markdown image rendering', () => {
     await page.getByRole('button', { name: `View full image: ${WORKSPACE_ALT}`, exact: true }).click()
     const lightbox = page.getByRole('dialog', { name: 'Image preview', exact: true })
     await lightbox.waitFor()
-    const lightboxMask = lightbox.locator(':scope > [aria-hidden="true"]')
+    const lightboxMask = lightbox.locator(':scope > div > [aria-hidden="true"]')
     const lightboxClose = lightbox.getByRole('button', { name: 'Close image preview' })
     for (const windows of [true, false]) {
       await page.evaluate((value) => {

packages/client/ui-primitives/src/ImageLightbox.module.css

@@ -1,16 +1,24 @@
+/* Full-viewport layer that blocks background clicks, including on the Windows caption. */
 .backdrop {
   position: fixed;
   inset: 0;
   z-index: 1000;
-  display: grid;
-  place-items: center;
-  padding: calc(40px + var(--dsh-frame-chrome-top, 0px)) 40px 40px;
 }
 
-/* Shared dimming mask below the preview and its controls; like Modal, it leaves the Windows caption unpainted. */
-.mask {
+/* Painted area below the Windows caption; like Modal, the caption stays unpainted. */
+.stage {
   position: absolute;
   inset: var(--dsh-frame-chrome-top, 0px) 0 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 40px;
+}
+
+/* Shared dimming mask below the preview and its controls. */
+.mask {
+  position: absolute;
+  inset: 0;
   background: var(--dsw-alias-bg-mask-1);
   backdrop-filter: var(--dsw-mask-blur);
 }
@@ -18,7 +26,7 @@
 .image {
   position: relative;
   max-width: min(100%, 1600px);
-  max-height: calc(100vh - 80px - var(--dsh-frame-chrome-top, 0px));
+  max-height: 100%;
   object-fit: contain;
   border-radius: var(--dsw-radius-lg);
   background: var(--dsw-specific-input-major);
@@ -27,8 +35,8 @@
 }
 
 .close {
-  position: fixed;
-  top: calc(20px + var(--dsh-frame-chrome-top, 0px));
+  position: absolute;
+  top: 20px;
   right: 20px;
   z-index: 1;
   display: grid;

packages/client/ui-primitives/src/ImageLightbox.tsx

@@ -54,11 +54,13 @@ export function ImageLightbox({ src, alt, labels, onClose }: {
       aria-modal="true"
       aria-label={labels.dialog}
     >
-      <div className={css.mask} aria-hidden="true" onMouseDown={onClose} />
-      <img className={css.image} src={src} alt={alt} />
-      <button ref={closeRef} type="button" className={css.close} aria-label={labels.close} onClick={onClose}>
-        <IconCloseOutlineRegular size={16} />
-      </button>
+      <div className={css.stage}>
+        <div className={css.mask} aria-hidden="true" onMouseDown={onClose} />
+        <img className={css.image} src={src} alt={alt} />
+        <button ref={closeRef} type="button" className={css.close} aria-label={labels.close} onClick={onClose}>
+          <IconCloseOutlineRegular size={16} />
+        </button>
+      </div>
     </div>,
     document.body,
   )