updated frame for mobile

app/ui-tarot-frame.js

@@ -991,7 +991,46 @@
     return getCardOverlayDate(card) || formatMonthDay(getRelation(card, "decan")?.data?.dateStart) || getDisplayCardName(card);
   }
 
-  function centerGridViewport() {
+  function getOccupiedGridBounds(gridTrackEl) {
+    if (!(gridTrackEl instanceof HTMLElement)) {
+      return null;
+    }
+
+    const filledSlots = Array.from(gridTrackEl.querySelectorAll(".tarot-frame-slot:not(.is-empty-slot)"));
+    if (!filledSlots.length) {
+      return null;
+    }
+
+    const trackRect = gridTrackEl.getBoundingClientRect();
+    return filledSlots.reduce((bounds, slotEl) => {
+      if (!(slotEl instanceof HTMLElement)) {
+        return bounds;
+      }
+
+      const slotRect = slotEl.getBoundingClientRect();
+      const left = slotRect.left - trackRect.left;
+      const right = slotRect.right - trackRect.left;
+      if (!bounds) {
+        return { left, right };
+      }
+
+      return {
+        left: Math.min(bounds.left, left),
+        right: Math.max(bounds.right, right)
+      };
+    }, null);
+  }
+
+  function resetFrameSectionScroll() {
+    const sectionEl = document.getElementById("tarot-frame-section");
+    if (!(sectionEl instanceof HTMLElement)) {
+      return;
+    }
+
+    sectionEl.scrollTop = 0;
+  }
+
+  function centerGridViewport(attempt = 0) {
     const { tarotFrameBoardEl } = getElements();
     const gridViewportEl = tarotFrameBoardEl?.querySelector(".tarot-frame-grid-viewport");
     const gridTrackEl = tarotFrameBoardEl?.querySelector(".tarot-frame-grid-track");
@@ -1004,16 +1043,44 @@
         return;
       }
 
-      const overflowX = Math.max(0, gridTrackEl.offsetWidth - gridViewportEl.clientWidth);
-      gridViewportEl.scrollLeft = overflowX > 0 ? overflowX / 2 : 0;
+      const contentWidth = gridTrackEl.scrollWidth || gridTrackEl.offsetWidth;
+      const viewportWidth = gridViewportEl.clientWidth;
+      if (!contentWidth || !viewportWidth) {
+        if (attempt < 6) {
+          centerGridViewport(attempt + 1);
+        }
+        return;
+      }
+
+      const occupiedBounds = getOccupiedGridBounds(gridTrackEl);
+      const targetCenter = occupiedBounds
+        ? (occupiedBounds.left + occupiedBounds.right) / 2
+        : contentWidth / 2;
+      const maxScrollLeft = Math.max(0, contentWidth - viewportWidth);
+      const targetScrollLeft = Math.min(Math.max(targetCenter - (viewportWidth / 2), 0), maxScrollLeft);
+      gridViewportEl.scrollLeft = targetScrollLeft;
 
       requestAnimationFrame(() => {
         if (!(gridViewportEl instanceof HTMLElement) || !(gridTrackEl instanceof HTMLElement)) {
           return;
         }
 
-        const nextOverflowX = Math.max(0, gridTrackEl.offsetWidth - gridViewportEl.clientWidth);
-        gridViewportEl.scrollLeft = nextOverflowX > 0 ? nextOverflowX / 2 : 0;
+        const nextContentWidth = gridTrackEl.scrollWidth || gridTrackEl.offsetWidth;
+        const nextViewportWidth = gridViewportEl.clientWidth;
+        if (!nextContentWidth || !nextViewportWidth) {
+          if (attempt < 6) {
+            centerGridViewport(attempt + 1);
+          }
+          return;
+        }
+
+        const nextOccupiedBounds = getOccupiedGridBounds(gridTrackEl);
+        const nextTargetCenter = nextOccupiedBounds
+          ? (nextOccupiedBounds.left + nextOccupiedBounds.right) / 2
+          : nextContentWidth / 2;
+        const nextMaxScrollLeft = Math.max(0, nextContentWidth - nextViewportWidth);
+        const nextTargetScrollLeft = Math.min(Math.max(nextTargetCenter - (nextViewportWidth / 2), 0), nextMaxScrollLeft);
+        gridViewportEl.scrollLeft = nextTargetScrollLeft;
       });
     });
   }
@@ -2061,6 +2128,8 @@
       await config.ensureTarotSection(referenceData, magickDataset);
     }
 
+    resetFrameSectionScroll();
+
     const cards = getCards();
     if (!cards.length) {
       setStatus("Tarot cards are still loading...");