update app/ui-tarot-lightbox.js

app/ui-tarot-lightbox.js

@@ -1597,14 +1597,6 @@
       return;
     }
 
-    if (mobilePrevButtonEl.parentElement !== overlayEl) {
-      overlayEl.appendChild(mobilePrevButtonEl);
-    }
-
-    if (mobileNextButtonEl.parentElement !== overlayEl) {
-      overlayEl.appendChild(mobileNextButtonEl);
-    }
-
     const canNavigate = Boolean(
       lightboxState.isOpen
       && isCompactLightboxLayout()
@@ -1631,7 +1623,70 @@
     mobilePrevButtonEl.style.font = isCompact ? "800 26px/1 sans-serif" : "700 20px/1 sans-serif";
     mobileNextButtonEl.style.font = isCompact ? "800 26px/1 sans-serif" : "700 20px/1 sans-serif";
 
+    if (isCompact && canNavigate && toolbarEl instanceof HTMLElement) {
+      toolbarEl.style.display = "grid";
+      toolbarEl.style.gridTemplateColumns = "60px minmax(0, auto) 60px";
+      toolbarEl.style.columnGap = "12px";
+      toolbarEl.style.justifyContent = "stretch";
+      toolbarEl.style.justifyItems = "center";
+      toolbarEl.style.alignItems = "center";
+
+      if (mobilePrevButtonEl.parentElement !== toolbarEl) {
+        toolbarEl.insertBefore(mobilePrevButtonEl, settingsButtonEl || null);
+      }
+
+      if (mobileNextButtonEl.parentElement !== toolbarEl) {
+        toolbarEl.appendChild(mobileNextButtonEl);
+      }
+
+      if (settingsButtonEl instanceof HTMLElement) {
+        settingsButtonEl.style.gridColumn = "2";
+        settingsButtonEl.style.justifySelf = "center";
+      }
+
+      mobilePrevButtonEl.style.position = "relative";
+      mobileNextButtonEl.style.position = "relative";
+      mobilePrevButtonEl.style.top = "auto";
+      mobileNextButtonEl.style.top = "auto";
+      mobilePrevButtonEl.style.right = "auto";
+      mobileNextButtonEl.style.right = "auto";
+      mobilePrevButtonEl.style.left = "auto";
+      mobileNextButtonEl.style.left = "auto";
+      mobilePrevButtonEl.style.bottom = "auto";
+      mobileNextButtonEl.style.bottom = "auto";
+      mobilePrevButtonEl.style.gridColumn = "1";
+      mobileNextButtonEl.style.gridColumn = "3";
+      mobilePrevButtonEl.style.justifySelf = "start";
+      mobileNextButtonEl.style.justifySelf = "end";
+      mobilePrevButtonEl.style.alignSelf = "center";
+      mobileNextButtonEl.style.alignSelf = "center";
+      mobilePrevButtonEl.style.transform = "none";
+      mobileNextButtonEl.style.transform = "none";
+      return;
+    }
+
+    if (mobilePrevButtonEl.parentElement !== overlayEl) {
+      overlayEl.appendChild(mobilePrevButtonEl);
+    }
+
+    if (mobileNextButtonEl.parentElement !== overlayEl) {
+      overlayEl.appendChild(mobileNextButtonEl);
+    }
+
+    if (toolbarEl instanceof HTMLElement) {
+      toolbarEl.style.gridTemplateColumns = "";
+      toolbarEl.style.columnGap = "";
+      toolbarEl.style.justifyItems = "";
+    }
+
+    if (settingsButtonEl instanceof HTMLElement) {
+      settingsButtonEl.style.gridColumn = "";
+      settingsButtonEl.style.justifySelf = "";
+    }
+
     if (!canNavigate) {
+      mobilePrevButtonEl.style.position = "fixed";
+      mobileNextButtonEl.style.position = "fixed";
       return;
     }
 
@@ -1673,6 +1728,8 @@
       ? toolbarBottom
       : `${toolbarHeight + floatingPanelHeight + (mobileInfoPanelVisible ? infoPanelHeight + 32 : 24)}px`;
 
+    mobilePrevButtonEl.style.position = "fixed";
+    mobileNextButtonEl.style.position = "fixed";
     mobilePrevButtonEl.style.top = "auto";
     mobileNextButtonEl.style.top = "auto";
     mobilePrevButtonEl.style.bottom = isCompact ? bottomOffset : bottomOffset;
@@ -2073,7 +2130,6 @@
     syncDeckComparePicker();
     syncComparePanels();
     syncMobileInfoControls();
-    syncMobileNavigationControls();
 
     if (lightboxState.deckCompareMode) {
       overlayEl.style.pointerEvents = "none";
@@ -2187,6 +2243,7 @@
       secondaryInfoEl.style.display = "none";
       applyZoomTransform();
       setOverlayOpacity(lightboxState.overlayOpacity);
+      syncMobileNavigationControls();
       return;
     }
 
@@ -2238,6 +2295,7 @@
       overlayImageEl.style.display = "none";
       secondaryInfoEl.style.display = "none";
       applyZoomTransform();
+      syncMobileNavigationControls();
       return;
     }
 
@@ -2333,6 +2391,7 @@
 
     applyZoomTransform();
     setOverlayOpacity(lightboxState.overlayOpacity);
+    syncMobileNavigationControls();
   }
 
   function resetZoom() {