From 17b7af9b92f0b90478e8b4c913f519edf206e548 Mon Sep 17 00:00:00 2001
From: Mike Dalessio <mike@37signals.com>
Date: Wed, 28 Jan 2026 17:51:32 -0500
Subject: [PATCH] Fix lightbox blocking clicks on page elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The CSS change in 39575a0 added `display: flex` to the lightbox dialog
unconditionally, which overrode the browser's default `display: none`
for closed dialogs. This made the invisible lightbox overlay intercept
all clicks on the page.

Move flexbox properties to the `&[open]` selector so they only apply
when the dialog is actually open.

Also fix typo: `innerHtml` → `innerHTML` (capital H).

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/assets/stylesheets/lightbox.css               | 6 +++---
 app/javascript/controllers/lightbox_controller.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css
index b1b73af51..6ec846c3d 100644
--- a/app/assets/stylesheets/lightbox.css
+++ b/app/assets/stylesheets/lightbox.css
@@ -3,14 +3,11 @@
     --dialog-duration: 350ms;
     --lightbox-padding: 3vmin;
 
-    align-items: center;
     background-color: transparent;
     block-size: 100dvh;
     border: 0;
-    display: flex;
     inline-size: 100dvw;
     inset: 0;
-    justify-content: center;
     margin: auto;
     max-height: unset;
     max-width: unset;
@@ -39,6 +36,9 @@
     /* Open state */
     &[open],
     &[open]::backdrop {
+      align-items: center;
+      display: flex;
+      justify-content: center;
       opacity: 1;
 
       @starting-style {
diff --git a/app/javascript/controllers/lightbox_controller.js b/app/javascript/controllers/lightbox_controller.js
index a30d5dd23..5197cb063 100644
--- a/app/javascript/controllers/lightbox_controller.js
+++ b/app/javascript/controllers/lightbox_controller.js
@@ -30,7 +30,7 @@ export default class extends Controller {
 
   reset() {
     this.zoomedImageTarget.src = ""
-    this.captionTarget.innerHtml = "&nbsp;"
+    this.captionTarget.innerHTML = "&nbsp;"
     this.dispatch('closed')
   }