Fix lightbox layout and focus

app/assets/stylesheets/lightbox.css

@@ -3,16 +3,23 @@
     --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: var(--lightbox-padding);
+    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));
     text-align: center;
 
     &::backdrop {
@@ -47,12 +54,15 @@
   .lightbox__actions {
     display: flex;
     gap: 1ch;
-    inset: var(--lightbox-padding) var(--lightbox-padding) auto auto;
+    inset:
+      calc(var(--lightbox-padding) + var(--custom-safe-inset-top))
+      calc(var(--lightbox-padding) + var(--custom-safe-inset-right))
+      auto
+      auto;
     position: absolute;
   }
 
   .lightbox__figure {
-    align-self: stretch;
     animation-fill-mode: forwards;
     animation: slide-down var(--dialog-duration);
     display: flex;
@@ -72,6 +82,10 @@
     &:empty {
       display: none;
     }
+
+    &[tabindex="-1"]:focus-visible {
+      outline: unset;
+    }
   }
 
   .lightbox__image {

app/javascript/controllers/lightbox_controller.js

@@ -30,7 +30,7 @@ export default class extends Controller {
 
   reset() {
     this.zoomedImageTarget.src = ""
-    this.captionTarget.innerText = ""
+    this.captionTarget.innerHtml = " "
     this.dispatch('closed')
   }
 

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"></figcaption>
+    <figcaption class="lightbox__caption" data-lightbox-target="caption" tabindex="-1" data-dialog-target="focusTouch">&nbsp</figcaption>
   </figure>
 
   <div class="lightbox__actions">
     <%= yield %>
-    <button class="btn fill-white" data-action="dialog#close" data-controller="hotkey tooltip">
+    <button class="btn fill-white" data-action="dialog#close" data-controller="hotkey tooltip" data-dialog-target="focusMouse">
       <%= icon_tag "remove" %>
       <span class="for-screen-reader">Close (esc)</span>
     </button>