From 5929844d7f715eab987147f575297c84ddbb5ef1 Mon Sep 17 00:00:00 2001
From: Mike Dalessio <mike@37signals.com>
Date: Wed, 28 Jan 2026 17:39:32 -0500
Subject: [PATCH] Revert "Fix lightbox layout and focus"

This reverts commit 39575a0cb6c94cb9d32ed2d4208bf2567a268d84.
---
 app/assets/stylesheets/lightbox.css           | 20 +++----------------
 .../controllers/lightbox_controller.js        |  2 +-
 app/views/layouts/_lightbox.html.erb          |  4 ++--
 3 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css
index b1b73af513..65144a22bd 100644
--- a/app/assets/stylesheets/lightbox.css
+++ b/app/assets/stylesheets/lightbox.css
@@ -3,23 +3,16 @@
     --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;
     overflow: hidden;
-    padding:
-      calc(var(--lightbox-padding) + var(--custom-safe-inset-top))
-      calc(var(--lightbox-padding) + var(--custom-safe-inset-right))
-      calc(var(--lightbox-padding) + var(--custom-safe-inset-bottom))
-      calc(var(--lightbox-padding) + var(--custom-safe-inset-left));
+    padding: var(--lightbox-padding);
     text-align: center;
 
     &::backdrop {
@@ -54,15 +47,12 @@
   .lightbox__actions {
     display: flex;
     gap: 1ch;
-    inset:
-      calc(var(--lightbox-padding) + var(--custom-safe-inset-top))
-      calc(var(--lightbox-padding) + var(--custom-safe-inset-right))
-      auto
-      auto;
+    inset: var(--lightbox-padding) var(--lightbox-padding) auto auto;
     position: absolute;
   }
 
   .lightbox__figure {
+    align-self: stretch;
     animation-fill-mode: forwards;
     animation: slide-down var(--dialog-duration);
     display: flex;
@@ -82,10 +72,6 @@
     &:empty {
       display: none;
     }
-
-    &[tabindex="-1"]:focus-visible {
-      outline: unset;
-    }
   }
 
   .lightbox__image {
diff --git a/app/javascript/controllers/lightbox_controller.js b/app/javascript/controllers/lightbox_controller.js
index a30d5dd233..fc86b18f73 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.innerText = ""
     this.dispatch('closed')
   }
 
diff --git a/app/views/layouts/_lightbox.html.erb b/app/views/layouts/_lightbox.html.erb
index b469377cae..74f5597a9d 100644
--- a/app/views/layouts/_lightbox.html.erb
+++ b/app/views/layouts/_lightbox.html.erb
@@ -3,12 +3,12 @@
 
   <figure class="lightbox__figure">
     <img src="" class="lightbox__image" data-lightbox-target="zoomedImage" />
-    <figcaption class="lightbox__caption" data-lightbox-target="caption" tabindex="-1" data-dialog-target="focusTouch">&nbsp</figcaption>
+    <figcaption class="lightbox__caption" data-lightbox-target="caption"></figcaption>
   </figure>
 
   <div class="lightbox__actions">
     <%= yield %>
-    <button class="btn fill-white" data-action="dialog#close" data-controller="hotkey tooltip" data-dialog-target="focusMouse">
+    <button class="btn fill-white" data-action="dialog#close" data-controller="hotkey tooltip">
       <%= icon_tag "remove" %>
       <span class="for-screen-reader">Close (esc)</span>
     </button>