From 13e7980071ab11b07b5d473e43506c6cb4ab637e Mon Sep 17 00:00:00 2001
From: Christophe Besson <cbesson@gmail.com>
Date: Mon, 12 Oct 2026 12:57:49 +0200
Subject: fix: keep the photo lightbox's close button on a phone screen

The bar was 457 px wide and pushed the close button to 397..437 px, off a
360 px phone. Delete leaves the lightbox (it stays on the tile's menu:
right-click, or press and hold), and below 768 px the bar drops the file
name, the zoom label and 100%.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 packages/meshbay-hub/src/meshbay_hub/static/photos-app.js | 13 +++++--------
 packages/meshbay-hub/src/meshbay_hub/static/style.css     | 10 ++++++++++
 2 files changed, 15 insertions(+), 8 deletions(-)

(limited to 'packages/meshbay-hub/src/meshbay_hub/static')

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js b/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js
index df207ab..6dd2310 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/photos-app.js
@@ -180,7 +180,7 @@ const ZOOM_MAX = 400;
 const SLIDESHOW_MS = 5000;
 
 function Lightbox({
-  photos, index, transportRef, gekRef, onClose, onNav, linkFor, onDelete, onPlay,
+  photos, index, transportRef, gekRef, onClose, onNav, linkFor, onPlay,
 }) {
   const entry = photos[index];
   // A video is shown by its thumbnail and played in the group's video
@@ -330,10 +330,6 @@ function Lightbox({
           <button class="video-close" onClick=${() => copyLink(linkFor(entry))}
             title=${t('link.copy')} aria-label=${t('link.copy')}>
             <${Icon} name="link" /></button>`}
-        ${onDelete && onDelete(entry) && html`
-          <button class="video-close" onClick=${onDelete(entry)}
-            title=${t('group.delete')} aria-label=${t('group.delete')}>
-            <${Icon} name="trash" /></button>`}
         <button class="video-close" onClick=${onClose} title=${t('video.close')}>
           <${Icon} name="close" /></button>
       </div>
@@ -375,8 +371,9 @@ function AlbumView({
   album, entries, transportRef, gekRef, setError, onBack, readOnly, linkFor, onDelete, onPlay,
 }) {
   const [lightboxIndex, setLightboxIndex] = useState(null);
-  // Right-click a photo for its link, or to delete it. A tile has no dots to
-  // press, so on a touchscreen both are in the lightbox's bar instead.
+  // Right-click a photo, or press and hold it, for its link or to delete it.
+  // Deleting is here only: the lightbox's bar has no room left for it on a
+  // phone, where it pushed the close button off the screen.
   const { menu, openAt, close: closeMenu } = useMenu();
   const onTileMenu = (e, entry) => {
     const link = linkFor ? linkFor(entry) : null;
@@ -442,7 +439,7 @@ function AlbumView({
       <${Lightbox} photos=${album.photos} index=${lightboxIndex}
         transportRef=${transportRef} gekRef=${gekRef}
         onClose=${() => setLightboxIndex(null)} onNav=${navigate} linkFor=${linkFor}
-        onDelete=${onDelete} onPlay=${onPlay} />
+        onPlay=${onPlay} />
     `}
     ${menu && html`<${Menu} ...${menu} onClose=${closeMenu} />`}
   `;
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/style.css b/packages/meshbay-hub/src/meshbay_hub/static/style.css
index b5996d8..586f36d 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/style.css
+++ b/packages/meshbay-hub/src/meshbay_hub/static/style.css
@@ -5295,6 +5295,16 @@ h2 .gn-owner, h3 .gn-owner { font-size: 0.55em; }
   flex-shrink: 0;
 }
 
+/* A phone has room for the zoom buttons, slideshow, cast, link and close —
+   not for the file name, the zoom label and 100% as well: they pushed the
+   close button off the right of the screen. */
+@media (max-width: 768px) {
+  .photo-lightbox .video-top-bar { padding-left: 12px; padding-right: 12px; gap: 6px; }
+  .photo-lightbox .video-title,
+  .photo-lightbox .photo-zoom-percent,
+  .photo-lightbox .photo-icon-btn-text { display: none; }
+}
+
 .photo-lightbox-info {
   position: absolute;
   bottom: 0;
-- 
cgit v1.2.3