From bf608ac730eb03f2faa5df0efaabb14301b35459 Mon Sep 17 00:00:00 2001
From: Nose <goyimnose@nothing.blah>
Date: Mon, 8 Jun 2026 17:40:59 -0700
Subject: [PATCH] update mobile ui

---
 app/ui-tarot-lightbox.js | 31 +++++++++++++++++++++++++------
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git a/app/ui-tarot-lightbox.js b/app/ui-tarot-lightbox.js
index 05860f9..cf4673b 100644
--- a/app/ui-tarot-lightbox.js
+++ b/app/ui-tarot-lightbox.js
@@ -1612,6 +1612,7 @@
       && !lightboxState.deckComparePickerOpen
       && hasSequenceNavigation()
     );
+    const isCompact = isCompactLightboxLayout();
     const previousLabel = lightboxState.compareMode
       ? "Previous overlay card"
       : (lightboxState.deckCompareMode ? "Previous compared card" : "Previous card");
@@ -1623,6 +1624,12 @@
     mobileNextButtonEl.style.display = canNavigate ? "inline-flex" : "none";
     mobilePrevButtonEl.setAttribute("aria-label", previousLabel);
     mobileNextButtonEl.setAttribute("aria-label", nextLabel);
+    mobilePrevButtonEl.style.width = isCompact ? "56px" : "44px";
+    mobileNextButtonEl.style.width = isCompact ? "56px" : "44px";
+    mobilePrevButtonEl.style.height = isCompact ? "56px" : "44px";
+    mobileNextButtonEl.style.height = isCompact ? "56px" : "44px";
+    mobilePrevButtonEl.style.font = isCompact ? "800 24px/1 sans-serif" : "700 20px/1 sans-serif";
+    mobileNextButtonEl.style.font = isCompact ? "800 24px/1 sans-serif" : "700 20px/1 sans-serif";
 
     if (!canNavigate) {
       return;
@@ -1659,12 +1666,23 @@
       helpPanelVisible && helpPanelEl instanceof HTMLElement ? helpPanelEl.offsetHeight + 12 : 0,
       deckPickerVisible && deckComparePanelEl instanceof HTMLElement ? deckComparePanelEl.offsetHeight + 12 : 0
     );
-    const bottomOffset = toolbarHeight + floatingPanelHeight + (mobileInfoPanelVisible ? infoPanelHeight + 32 : 24);
+    const buttonBottomOffset = Math.max(
+      16,
+      mobileInfoPanelVisible ? infoPanelHeight + 16 : 16,
+      floatingPanelHeight ? floatingPanelHeight + 12 : 16
+    );
+    const bottomOffset = isCompact
+      ? buttonBottomOffset
+      : toolbarHeight + floatingPanelHeight + (mobileInfoPanelVisible ? infoPanelHeight + 32 : 24);
 
     mobilePrevButtonEl.style.top = "auto";
     mobileNextButtonEl.style.top = "auto";
-    mobilePrevButtonEl.style.bottom = `${bottomOffset}px`;
-    mobileNextButtonEl.style.bottom = `${bottomOffset}px`;
+    mobilePrevButtonEl.style.bottom = isCompact
+      ? `calc(${bottomOffset}px + env(safe-area-inset-bottom, 0px))`
+      : `${bottomOffset}px`;
+    mobileNextButtonEl.style.bottom = isCompact
+      ? `calc(${bottomOffset}px + env(safe-area-inset-bottom, 0px))`
+      : `${bottomOffset}px`;
     mobilePrevButtonEl.style.transform = "none";
     mobileNextButtonEl.style.transform = "none";
   }
@@ -3161,16 +3179,17 @@
       buttonEl.style.display = "none";
       buttonEl.style.alignItems = "center";
       buttonEl.style.justifyContent = "center";
-      buttonEl.style.width = "44px";
-      buttonEl.style.height = "44px";
+      buttonEl.style.width = "56px";
+      buttonEl.style.height = "56px";
       buttonEl.style.border = "1px solid rgba(255, 255, 255, 0.2)";
       buttonEl.style.borderRadius = "999px";
       buttonEl.style.background = "rgba(15, 23, 42, 0.84)";
       buttonEl.style.color = "#f8fafc";
-      buttonEl.style.font = "700 20px/1 sans-serif";
+      buttonEl.style.font = "800 24px/1 sans-serif";
       buttonEl.style.cursor = "pointer";
       buttonEl.style.backdropFilter = "blur(12px)";
       buttonEl.style.transform = "none";
+      buttonEl.style.touchAction = "manipulation";
       buttonEl.style.pointerEvents = "auto";
       buttonEl.style.zIndex = "6";
       return buttonEl;