UX: prevent lightbox counter wrapping (#36245)

dbattersby · web-flow · commit 9a4d5d97cc51 · 2025-11-26T13:58:40.000+04:00
Due to limited space in the lightbox header, the counter text can wrap to the next line on mobile. Note: the gap between the counter and buttons is taken up by the loading animation. Making a small adjustment to the button size allows for better layout with our current buttons. ### Before <img width="388" height="81" alt="Screenshot 2025-11-26 at 1 21 46 PM" src="https://github.com/user-attachments/assets/de405c36-0cd9-427e-9482-7f082b935a47" /> ### After <img width="390" height="68" alt="Screenshot 2025-11-26 at 1 21 23 PM" src="https://github.com/user-attachments/assets/eeb06ac0-d2e7-4c05-8088-d8b2799aa5ed" />
diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
@@ -200,6 +200,14 @@
   opacity: 1;
 }
 
+.pswp .pswp__button {
+  width: 45px;
+}
+
+.pswp .pswp__icn {
+  left: 6px;
+}
+
 .pswp__button--original-image svg,
 .pswp__button--image-info svg {
   padding: 0.32em;
