feat(mobile-ui): add alphabet touch-drag scrubber, 16:9 full backdrop, fix dots overlap and tap lag

apex/ui/abyss.css

@@ -402,12 +402,23 @@ input[type="radio"]:checked {
 
 /* Jellyfin 12 modern app shell (React / MUI) [BETA] */
 
-/* Jellyfin Alphabet Picker (A-Z Quick Scroller) - Transparent, Small & Edge-Pinned */
+/* Jellyfin Alphabet Picker (A-Z Quick Scroller) - Transparent, Full Height, Edge-Pinned & Evenly Spaced */
 .alphaPicker,
 .alphaPicker-fixed,
 .alphaPicker-fixed-right,
 .alphanumeric-scrollbar,
 div[class*="alphaPicker"] {
+    position: fixed !important;
+    top: 72px !important;
+    bottom: 24px !important;
+    right: 2px !important;
+    height: calc(100vh - 96px) !important;
+    max-height: calc(100vh - 96px) !important;
+    margin: 0 !important;
+    padding: 2px 0 !important;
+    width: 22px !important;
+    min-width: 0 !important;
+    max-width: 24px !important;
     background: transparent !important;
     background-color: transparent !important;
     background-image: none !important;
@@ -415,16 +426,15 @@ div[class*="alphaPicker"] {
     border: none !important;
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
-    right: 0 !important;
-    margin-right: 0 !important;
-    padding-right: 1px !important;
-    padding-left: 0 !important;
-    width: auto !important;
-    min-width: 0 !important;
-    max-width: 18px !important;
     pointer-events: auto !important;
-    z-index: 100 !important;
-    align-self: center;
+    touch-action: none !important;
+    user-select: none !important;
+    -webkit-user-select: none !important;
+    z-index: 1000 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: space-between !important;
+    align-items: center !important;
 }
 
 .alphaPicker .alphaPickerInner,
@@ -441,14 +451,14 @@ div[class*="alphaPickerInner"] {
     backdrop-filter: none !important;
     padding: 0 !important;
     margin: 0 !important;
-    width: auto !important;
-    min-width: 0 !important;
-    max-width: 18px !important;
+    width: 100% !important;
+    height: 100% !important;
+    max-height: 100% !important;
     border-radius: 0 !important;
     display: flex !important;
     flex-direction: column !important;
     align-items: center !important;
-    justify-content: center !important;
+    justify-content: space-between !important;
 }
 
 .alphaPickerButton,
@@ -459,34 +469,74 @@ div[class*="alphaPicker"] button,
 div[class*="alphaPickerButton"] {
     background: transparent !important;
     background-color: transparent !important;
-    color: rgba(255, 255, 255, 0.55) !important;
+    color: rgba(255, 255, 255, 0.6) !important;
     font-size: 8.5px !important;
     font-weight: 700 !important;
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace, sans-serif !important;
     line-height: 1 !important;
-    padding: 1px 2px !important;
+    padding: 0 !important;
     margin: 0 !important;
-    min-width: 12px !important;
-    max-width: 16px !important;
-    height: auto !important;
-    min-height: 0 !important;
+    width: 20px !important;
+    min-width: 0 !important;
+    flex: 1 1 0% !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
     border: none !important;
     border-radius: 2px !important;
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.95), 0 0 3px rgba(0, 0, 0, 0.9) !important;
-    transition: color 0.15s ease, transform 0.15s ease, background-color 0.15s ease !important;
+    transition: color 0.1s ease, transform 0.1s ease, background-color 0.1s ease !important;
+    touch-action: none !important;
+    cursor: pointer !important;
 }
 
 .alphaPickerButton:hover,
 .alphaPickerButton:focus,
+.alphaPickerButton:active,
+.alphaPickerButton.active-scrub,
 .alphaPickerButton.selectedItem,
 .alphaPickerButton-selected,
 .alphaPicker-fixed-right .MuiButtonBase-root:hover,
 .alphaPicker-fixed-right .MuiButtonBase-root.Mui-selected {
     color: #ffffff !important;
     background: rgba(var(--abyss-accent, 0, 164, 220), 0.35) !important;
-    transform: scale(1.25) !important;
+    transform: scale(1.3) !important;
     font-weight: 900 !important;
-    text-shadow: 0 0 6px rgba(var(--abyss-accent, 0, 164, 220), 0.8) !important;
+    text-shadow: 0 0 8px rgba(var(--abyss-accent, 0, 164, 220), 0.9) !important;
+}
+
+/* Floating Alphabet Scrub HUD Bubble */
+#alpha-scrubber-hud {
+    position: fixed !important;
+    top: 50% !important;
+    right: 48px !important;
+    transform: translateY(-50%) scale(0.9) !important;
+    width: 64px !important;
+    height: 64px !important;
+    border-radius: 50% !important;
+    background: rgba(12, 14, 20, 0.92) !important;
+    border: 1.5px solid rgba(var(--abyss-accent, 0, 164, 220), 0.7) !important;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.75), 0 0 20px rgba(var(--abyss-accent, 0, 164, 220), 0.4) !important;
+    backdrop-filter: blur(12px) !important;
+    -webkit-backdrop-filter: blur(12px) !important;
+    color: #ffffff !important;
+    font-size: 32px !important;
+    font-weight: 900 !important;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    z-index: 10001 !important;
+    pointer-events: none !important;
+    opacity: 0 !important;
+    visibility: hidden !important;
+    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease !important;
+}
+
+#alpha-scrubber-hud.visible {
+    opacity: 1 !important;
+    visibility: visible !important;
+    transform: translateY(-50%) scale(1) !important;
 }
 
 .MuiTouchRipple-root {
@@ -3417,8 +3467,46 @@ body.videoPlayerContainerVisible #abyss-spotlight-backdrop {
     display: none !important;
 }
 
+/* Mobile Touch & Tap Lag Elimination (0ms Click Response) */
+html,
+body,
+button,
+a,
+.card,
+.cardBox,
+.cardScalable,
+.emby-button,
+.paper-icon-button-light,
+.listItem,
+.navMenuOption,
+.headerButton,
+.emby-tab-button,
+.btn {
+    touch-action: manipulation !important;
+    -webkit-tap-highlight-color: transparent !important;
+}
+
 /* 13. Android & Mobile Perfection */
 @media (max-width: 959px) {
+    :root {
+        --abyss-glass-blur: 4px !important;
+        --abyss-backdrop-blur: 6px !important;
+    }
+
+    .cardImageContainer .cardImage {
+        background-size: cover !important;
+        background-position: center top !important;
+        image-rendering: -webkit-optimize-contrast !important;
+    }
+
+    .card:active .cardScalable,
+    .cardBox:active,
+    .listItem:active,
+    .emby-button:active {
+        transform: scale(0.97) !important;
+        transition: transform 0.08s ease !important;
+    }
+
     .MuiDrawer-modal .MuiDrawer-paper,
     .mainDrawer {
         position: fixed !important;
@@ -3428,8 +3516,8 @@ body.videoPlayerContainerVisible #abyss-spotlight-backdrop {
         width: 280px !important;
         max-width: 80vw !important;
         background: rgba(17, 17, 21, 0.98) !important;
-        backdrop-filter: blur(25px) !important;
-        -webkit-backdrop-filter: blur(25px) !important;
+        backdrop-filter: blur(12px) !important;
+        -webkit-backdrop-filter: blur(12px) !important;
         border: none !important;
         border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7) !important;

apex/ui/spotlight-loader.js

@@ -90,7 +90,7 @@
       "@media (min-width:1920px) { ." + FRAME_CLASS + " { height:68vh;max-height:860px; } }" +
       "@media (max-width:1024px) and (orientation:portrait) { ." + FRAME_CLASS + " { height:54vh;min-height:360px;max-height:500px; } }" +
       "@media (max-width:1024px) and (orientation:landscape) and (hover:none) and (pointer:coarse) { ." + FRAME_CLASS + " { height:100vh;min-height:280px;max-height:420px; } }" +
-      "@media (max-width:600px) and (orientation:portrait) { ." + FRAME_CLASS + " { height:52vh;min-height:340px;max-height:460px; } }" +
+      "@media (max-width:768px) and (orientation:portrait) { ." + FRAME_CLASS + " { height:48vh;min-height:380px;max-height:450px; } }" +
       "@media (max-width:900px) and (orientation:landscape) and (max-height:500px) { ." + FRAME_CLASS + " { height:100vh;min-height:200px; } }";
     document.head.appendChild(style);
   }
@@ -386,6 +386,105 @@
     return installed;
   }
 
+  var scrubberHud = null;
+  var scrubberActive = false;
+  var lastScrubbedLetter = "";
+
+  function ensureScrubberHud() {
+    if (scrubberHud && scrubberHud.isConnected) return scrubberHud;
+    scrubberHud = document.getElementById("alpha-scrubber-hud");
+    if (!scrubberHud) {
+      scrubberHud = document.createElement("div");
+      scrubberHud.id = "alpha-scrubber-hud";
+      document.body.appendChild(scrubberHud);
+    }
+    return scrubberHud;
+  }
+
+  function showScrubberHud(letter) {
+    var hud = ensureScrubberHud();
+    if (!hud) return;
+    hud.textContent = letter;
+    hud.classList.add("visible");
+  }
+
+  function hideScrubberHud() {
+    if (scrubberHud) {
+      scrubberHud.classList.remove("visible");
+    }
+    var activeButtons = document.querySelectorAll(".alphaPickerButton.active-scrub");
+    for (var i = 0; i < activeButtons.length; i++) {
+      activeButtons[i].classList.remove("active-scrub");
+    }
+    lastScrubbedLetter = "";
+  }
+
+  function installAlphaPickerScrubber() {
+    safe(function () {
+      var pickers = document.querySelectorAll(
+        ".alphaPicker, .alphaPicker-fixed, .alphaPicker-fixed-right, .alphanumeric-scrollbar, div[class*='alphaPicker']"
+      );
+      for (var p = 0; p < pickers.length; p++) {
+        var picker = pickers[p];
+        if (picker._scrubberInstalled) continue;
+        picker._scrubberInstalled = true;
+
+        var handleTouch = function (e) {
+          if (!e.touches || !e.touches.length) return;
+          var touch = e.touches[0];
+          var rect = picker.getBoundingClientRect();
+          var buttons = picker.querySelectorAll("button, .alphaPickerButton, .MuiButtonBase-root");
+          if (!buttons.length) return;
+
+          var relY = (touch.clientY - rect.top) / rect.height;
+          var index = Math.floor(relY * buttons.length);
+          if (index < 0) index = 0;
+          if (index >= buttons.length) index = buttons.length - 1;
+
+          var targetBtn = buttons[index];
+          if (!targetBtn) return;
+
+          var letter = (targetBtn.textContent || "").trim();
+          if (letter && letter !== lastScrubbedLetter) {
+            lastScrubbedLetter = letter;
+            showScrubberHud(letter);
+
+            var activeButtons = picker.querySelectorAll(".active-scrub");
+            for (var a = 0; a < activeButtons.length; a++) {
+              activeButtons[a].classList.remove("active-scrub");
+            }
+            targetBtn.classList.add("active-scrub");
+
+            targetBtn.click();
+
+            if (navigator.vibrate) {
+              try { navigator.vibrate(5); } catch (ve) {}
+            }
+          }
+        };
+
+        picker.addEventListener("touchstart", function (e) {
+          scrubberActive = true;
+          handleTouch(e);
+        }, { passive: true });
+
+        picker.addEventListener("touchmove", function (e) {
+          if (!scrubberActive) return;
+          if (e.cancelable) e.preventDefault();
+          handleTouch(e);
+        }, { passive: false });
+
+        var endHandler = function () {
+          scrubberActive = false;
+          hideScrubberHud();
+        };
+
+        picker.addEventListener("touchend", endHandler, { passive: true });
+        picker.addEventListener("touchcancel", endHandler, { passive: true });
+      }
+    });
+  }
+
   function boot() {
     function ensureDarkTheme() {
       try {
@@ -487,6 +586,7 @@
       var run = function () {
         installScheduled = false;
         installSpotlight();
+        installAlphaPickerScrubber();
         replaceServerNameText();
       };
 
@@ -525,6 +625,7 @@
     setInterval(function () {
       syncSettingsTheme();
       scheduleInstall();
+      installAlphaPickerScrubber();
       replaceServerNameText();
       if (currentSync) safe(currentSync);
     }, 2000);

apex/ui/spotlight.css

@@ -725,43 +725,47 @@ body {
 }
 
 @media (max-width: 768px) and (orientation: portrait) {
-	/* Mobile Full-Widescreen Backdrop: Remove the heavy left/right black side cutoffs */
+	/* Mobile Full-Widescreen Backdrop: 16:9 ratio displays 100% of the image edge-to-edge without side cropping */
 	#backdrop {
-		-webkit-mask-image:
-			linear-gradient(to bottom, black 55%, transparent 100%),
-			linear-gradient(to bottom, transparent 0%, black 5%);
-		mask-image:
-			linear-gradient(to bottom, black 55%, transparent 100%),
-			linear-gradient(to bottom, transparent 0%, black 5%);
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 56.25vw;
+		max-height: 260px;
+		-webkit-mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
+		mask-image: linear-gradient(to bottom, black 75%, transparent 100%);
 		-webkit-mask-composite: source-over;
 		mask-composite: add;
+		overflow: hidden;
 	}
 
 	#backdrop img {
 		width: 100%;
 		height: 100%;
 		object-fit: cover;
-		object-position: center 20%;
+		object-position: center top;
 		transform: none !important;
+		animation: none !important;
 		image-rendering: -webkit-optimize-contrast;
 	}
 
 	#content {
-		padding: 10vh 4.5vw 3vh;
+		padding: 0 4.5vw 42px !important;
 		justify-content: flex-end;
 	}
 
 	#logo {
-		max-width: 70vw;
-		max-height: 70px;
+		max-width: 65vw;
+		max-height: 60px;
 		object-position: left bottom;
-		margin-bottom: 10px;
+		margin-bottom: 8px;
 	}
 
 	#title {
-		font-size: clamp(1.4rem, 5.5vw, 2.2rem);
-		margin-bottom: 8px;
-		line-height: 1.1;
+		font-size: clamp(1.3rem, 5vw, 1.9rem);
+		margin-bottom: 6px;
+		line-height: 1.15;
 	}
 
 	#meta {
@@ -776,13 +780,13 @@ body {
 	}
 
 	#episode-label {
-		font-size: medium;
-		font-weight: bold;
-		margin-bottom: 8px;
+		font-size: 0.95rem;
+		font-weight: 700;
+		margin-bottom: 6px;
 	}
 
 	#plot {
-		font-size: 0.85rem;
+		font-size: 0.82rem;
 		line-height: 1.35;
 		max-width: 92vw;
 		margin-bottom: 12px;
@@ -792,19 +796,61 @@ body {
 		overflow: hidden;
 	}
 
+	/* Action buttons: single flex row, Play truncates gracefully, Trailer fits, Info is square */
 	#buttons {
-		gap: 8px;
-		margin-bottom: 4px;
+		display: flex !important;
+		flex-direction: row !important;
+		align-items: center !important;
+		gap: 8px !important;
+		width: 100% !important;
+		max-width: 100% !important;
+		margin-bottom: 14px !important;
 	}
 
 	.btn {
-		padding: 8px 16px;
-		font-size: 0.88rem;
-		height: 38px;
+		height: 38px !important;
+		font-size: 0.85rem !important;
+	}
+
+	.btn-play {
+		flex: 1 1 auto !important;
+		min-width: 0 !important;
+		max-width: none !important;
+		padding: 8px 12px !important;
+		margin-right: 0 !important;
+		white-space: nowrap !important;
+		overflow: hidden !important;
+		text-overflow: ellipsis !important;
+		justify-content: center !important;
+	}
+
+	.btn-trailer {
+		flex: 0 0 auto !important;
+		padding: 8px 12px !important;
+		margin-right: 0 !important;
+		white-space: nowrap !important;
+	}
+
+	.btn-info {
+		flex: 0 0 38px !important;
+		width: 38px !important;
+		min-width: 38px !important;
+		max-width: 38px !important;
+		height: 38px !important;
+		padding: 0 !important;
+		margin-right: 0 !important;
+		display: inline-flex !important;
+		align-items: center !important;
+		justify-content: center !important;
+		box-sizing: border-box !important;
 	}
 
+	/* Dots positioned safely at bottom with clean separation */
 	#carousel-dots {
-		bottom: 2px;
+		bottom: 8px !important;
+		padding: 4px 10px !important;
+		gap: 6px !important;
+		z-index: 10 !important;
 	}
 
 	#update-toast {