From afa6430c1260ca5cabeacb3a7be46a44cb26f2de Mon Sep 17 00:00:00 2001
From: Andy Smith <andy@37signals.com>
Date: Mon, 4 Aug 2025 13:08:28 -0500
Subject: [PATCH] CSS support for multiple actions

---
 app/assets/stylesheets/lightbox.css  | 6 ++++--
 app/views/layouts/_lightbox.html.erb | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/lightbox.css b/app/assets/stylesheets/lightbox.css
index 59fd0cbc0..4a9cb3d8b 100644
--- a/app/assets/stylesheets/lightbox.css
+++ b/app/assets/stylesheets/lightbox.css
@@ -44,8 +44,10 @@
     }
   }
 
-  .lightbox__btn {
-    inset: var(--block-space-half) var(--inline-space) auto auto;
+  .lightbox__actions {
+    display: flex;
+    gap: 1ch;
+    inset: var(--lightbox-padding) var(--lightbox-padding) auto auto;
     position: absolute;
   }
 
diff --git a/app/views/layouts/_lightbox.html.erb b/app/views/layouts/_lightbox.html.erb
index bd99bf3b3..b73dbcbe4 100644
--- a/app/views/layouts/_lightbox.html.erb
+++ b/app/views/layouts/_lightbox.html.erb
@@ -6,7 +6,7 @@
     <figcaption class="lightbox__caption" data-lightbox-target="caption"></figcaption>
   </figure>
 
-  <div class="lightbox__btn">
+  <div class="lightbox__actions">
     <button class="btn fill-white" title="Close (esc)" data-action="dialog#close keydown.esc->dialog#close:stop" data-controller="hotkey">
       <%= icon_tag "remove" %>
       <span class="for-screen-reader">Close image viewer (esc)</span>