From e30f6b919d438f16c4919bbaf939384a8031ac27 Mon Sep 17 00:00:00 2001
From: David Battersby <info@davidbattersby.com>
Date: Mon, 20 Oct 2025 14:59:03 +0400
Subject: [PATCH] UX: mobile lightbox padding and styling improvements (#35494)

Adds a safe inset bottom for lightbox captions on mobile and removes
image padding on small screens. This change also applies bottom
depending on whether caption is being set or not.

How it looks:

<img width="225" height="487" alt="IMG_9334"
src="https://github.com/user-attachments/assets/d92d379a-ad63-44d0-8320-a0861b2a10e4"
/>
---
 .../javascripts/discourse/app/lib/lightbox.js | 38 ++++++++++++-------
 .../stylesheets/common/base/lightbox.scss     |  3 +-
 .../discourse/components/chat-upload.gjs      |  1 -
 3 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/lib/lightbox.js b/app/assets/javascripts/discourse/app/lib/lightbox.js
index 22aafb24009..16a38a26bc3 100644
--- a/app/assets/javascripts/discourse/app/lib/lightbox.js
+++ b/app/assets/javascripts/discourse/app/lib/lightbox.js
@@ -21,6 +21,8 @@ export default async function lightbox(elem, siteSettings) {
     return;
   }
 
+  const caps = helperContext().capabilities;
+  const imageClickNavigation = caps.touch;
   const canDownload =
     !siteSettings.prevent_anons_from_downloading_files || User.current();
 
@@ -33,7 +35,17 @@ export default async function lightbox(elem, siteSettings) {
       arrowPrevTitle: i18n("lightbox.previous"),
       arrowNextTitle: i18n("lightbox.next"),
       errorMsg: i18n("lightbox.content_load_error", { url: elem.href }),
-      padding: { top: 20, bottom: 60, left: 20, right: 20 },
+      paddingFn: (viewportSize, itemData) => {
+        if (viewportSize.x < 1200 || caps.isMobileDevice) {
+          return { top: 0, bottom: 0, left: 0, right: 0 };
+        }
+        return {
+          top: 20,
+          bottom: itemData.title ? 75 : 20,
+          left: 20,
+          right: 20,
+        };
+      },
       pswpModule: async () => await import("photoswipe"),
       appendToEl: isTesting() && document.getElementById("ember-testing"),
     });
@@ -48,22 +60,23 @@ export default async function lightbox(elem, siteSettings) {
         html: "",
         onInit: (caption, pswp) => {
           pswp.on("change", () => {
-            const { element, isChat, inlineSVG } = pswp.currSlide.data;
+            const { element, title, inlineSVG } = pswp.currSlide.data;
 
-            if (!element || isChat || inlineSVG) {
+            if (!element || !title || inlineSVG) {
               return;
             }
 
-            const text = escapeExpression(element.alt || element.title);
-            const info = element.querySelector(".informations")?.innerText;
-            const title = text
-              ? `<div class='pswp__caption-title'>${text}</div>`
+            const captionTitle = escapeExpression(title);
+            const captionDetails =
+              element.querySelector(".informations")?.innerText;
+            const titleEl = captionTitle
+              ? `<div class='pswp__caption-title'>${captionTitle}</div>`
               : null;
-            const details = info
-              ? `<div class='pswp__caption-details'>${info}</div>`
+            const detailsEl = captionDetails
+              ? `<div class='pswp__caption-details'>${captionDetails}</div>`
               : null;
 
-            caption.innerHTML = [title, details].filter(Boolean).join("");
+            caption.innerHTML = [titleEl, detailsEl].filter(Boolean).join("");
           });
         },
       });
@@ -144,7 +157,7 @@ export default async function lightbox(elem, siteSettings) {
       }
 
       data.src = data.src || el.getAttribute("data-large-src");
-      data.isChat = el.classList.contains("chat-img-upload");
+      data.title = el.title || el.alt;
       data.w = data.width = width;
       data.h = data.height = height;
 
@@ -160,9 +173,6 @@ export default async function lightbox(elem, siteSettings) {
       return;
     }
 
-    const caps = helperContext().capabilities;
-    const imageClickNavigation = caps.touch;
-
     await loadMagnificPopup();
 
     $(images).magnificPopup({
diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
index e3d0f968b68..75d33f984cd 100644
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/app/assets/stylesheets/common/base/lightbox.scss
@@ -125,7 +125,7 @@
 // photoswipe custom caption
 .pswp__caption {
   left: 0;
-  bottom: 0;
+  bottom: var(--safe-area-inset-bottom);
   width: 100%;
   padding: 0.5em;
   text-align: center;
@@ -134,6 +134,7 @@
   .pswp__caption-title {
     left: 50%;
     color: #fff;
+    line-height: 1.25em;
     position: relative;
     max-width: 800px;
     padding: 0 1em 0.25em;
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-upload.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-upload.gjs
index 2379986d420..6a08803d176 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-upload.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-upload.gjs
@@ -86,7 +86,6 @@ export default class ChatUpload extends Component {
         style={{this.imageStyle}}
         loading="lazy"
         tabindex="0"
-        alt={{@upload.original_filename}}
         data-target-width={{this.size.width}}
         data-target-height={{this.size.height}}
         data-dominant-color={{@upload.dominant_color}}