fix(library): keep the A-Z jump strip above the mini player

The last few letters of the A-Z index sat behind the mini player and bottom
nav, where they could not be tapped — most visible on an album's track list or
the music library, since that is where audio is usually already playing.

AlphabetScrollBar sized itself as window.innerHeight minus a hardcoded
bottomGap: 5rem, 7rem or 11rem, chosen by platform and by whether the mini
player was showing. That arithmetic dates from when the mini player and bottom
nav were position: fixed overlays. They have been in-flow flex siblings below
the scroller since BottomUi (DR-009), so the scroller's own bottom edge *is*
the top of the mini player and can simply be measured.

The guess was also short on every device with a navigation or gesture bar,
because --safe-bottom is padded inside BottomUi (DR-112) and no guess knew
about it. Measured against a 800px viewport: the strip overran the scrollport
by ~45px with the nav alone, ~18px with the mini player and ~50px in remote
mode, burying one to three letters.

The floor is now the nearest scrollable ancestor's bottom edge. That ancestor
is resolved by computed overflow-y rather than closest("main"): the root shell
scrolls in a plain div, and a miss fell back to the viewport silently, which
would reinstate the bug on any route outside /library. Observing that scroller
for resize is also what re-measures when the mini player appears, so the
component no longer subscribes to player or platform stores at all.

The floor rule is extracted to alphabetStrip.ts so it can be tested; the three
overlap cases above fail against the old arithmetic and pass against the new.

TRACES: UR-007 | DR-262 | UT-235, UT-236, UT-237

CHANGELOG.md

@@ -13,6 +13,15 @@ For how long each fixed defect had been shipping before it was found, see
 
 ### 🐛 Fixes
 
+- **The A-Z jump strip no longer runs under the mini player.** On a long
+  alphabetical list — an album's tracks, the music library — the last few
+  letters sat behind the mini player and bottom nav, where they could not be
+  tapped. The strip was sizing itself against the window minus a hardcoded guess
+  at how tall those bars are, which stopped being true when they became part of
+  the normal layout instead of floating over it, and was always short by the
+  height of your phone's navigation bar. It now measures the list it belongs to
+  and stops exactly where that list stops, whatever is below. (UR-007 → DR-262)
+
 - **Subtitles sit on the picture instead of on a black bar.** Every line arrived
   in an opaque box, which is what Android hands back when no captioning
   preferences have been set. The box is gone; the text keeps its own outline so

docs/requirements.md

@@ -455,6 +455,7 @@ Internal architecture, components, and application logic.
 | DR-259 | Subtitle URLs address Jellyfin's route, `/Videos/{item}/{source}/Subtitles/{index}/Stream.{format}`. The `Stream.` segment was missing, which matches no route and 404s, so every sideloaded subtitle failed to fetch. Since media3 1.5 a sideloaded text track only becomes a track group once its file is parsed, so 42 failed fetches left ExoPlayer with no text tracks at all and subtitle selection warned `available: 0` and did nothing. The URL tests that existed asserted the shape of a *mock helper* duplicating the format string rather than the URL the app requests, which is why a route error survived from the first release | Repository | UR-020 | Done |
 | DR-260 | Subtitle cues are **drawn**. ExoPlayer decodes subtitles and delivers them to a listener; it draws none of them itself, and native video here is a bare `TextureView` the WebView composites over rather than a `PlayerView`, so nothing was holding the cues and a selected track rendered nowhere. The gap was invisible while every subtitle URL 404ed (DR-259) — with no text track to select there was never a cue to drop, so fixing the URL is what exposed it. `media3-ui`'s `SubtitleView` now takes each `CueGroup` from `onCues` and is attached at index 1 of the content view: above the video, still below the WebView, so cues sit over the picture and under the app's own controls. It is fitted to the letterboxed video rect rather than the screen, so cues stay inside the picture and follow it on rotation, and is torn down with the surface it belongs to. Verified on a device | Player | UR-020, UR-003 | Done |
 | DR-261 | Subtitles are drawn **over the picture, not on a black bar across it**. `SubtitleView.setUserDefaultStyle()` reads Android's captioning preferences and falls back to media3's `DEFAULT` when the viewer has set none — and that default is white on opaque black, so every line arrived in a box as wide as the text. The viewer's own style is kept and only the two colours that paint a box, background and window, are cleared: someone who has configured captions in accessibility settings has said something specific about colour, typeface and edges, and replacing all of it to remove a background would answer a question they did not ask. A style specifying no edge gets a black outline, because without a box the text must supply its own contrast or it is unreadable over a bright scene; a style that already names an edge keeps it | Player | UR-020 | Done (pending device verification) |
+| DR-262 | The A-Z jump strip is bounded by the **scroller it lives in**, not by the viewport minus a guess at the bottom bars. `AlphabetScrollBar` sized itself as `window.innerHeight` minus a hardcoded `bottomGap` — 5rem, 7rem or 11rem, picked by platform and whether the mini player was showing — which dates from when the mini player and bottom nav were `position: fixed` overlays. They have been in-flow flex siblings below the scroller since BottomUi (DR-009), so the scroller's own bottom edge *is* the top of the mini player and can simply be measured. The guess was short on every device with a navigation or gesture bar, because `--safe-bottom` is padded *inside* BottomUi (DR-112) and no guess knew about it: the strip overran the scrollport by ~45px with the nav alone, ~18px with the mini player and ~50px in remote mode, burying one to three letters where they could not be tapped. The ancestor is resolved by computed `overflow-y` rather than `closest("main")`, since the root shell scrolls in a plain `<div>` and a miss silently fell back to the viewport — reinstating the bug on any route outside `/library`. Observing the scroller for resize is also what makes the mini player appearing re-measure, so the component no longer subscribes to player or platform stores at all | UI | UR-007 | Done |
 | DR-198 | The webview runs under a real Content-Security-Policy, and the asset protocol is scoped to the one directory it still serves. `csp` was `null`, which disables CSP entirely: any script that reached the web layer — through a future `{@html}`, a dependency, or a devtools paste — would have inherited the whole IPC surface, and with it the user's session. `script-src 'self'` (Tauri injects a nonce for SvelteKit's inline bootstrap script at build time, so no `'unsafe-inline'` is needed) plus `object-src`/`frame-src 'none'` and `base-uri 'self'` is the part that is genuinely restrictive. `img-src`/`media-src`/`connect-src` cannot be: the Jellyfin origin is typed in by the user at run time and is commonly plain `http` on a LAN, so they allow `http:`/`https:` — a wide grant for *data*, but one that still bars `file:`, `filesystem:` and scripting schemes, and leaves `script-src` untouched. `style-src` keeps `'unsafe-inline'` because Svelte compiles `style="…"` attributes (including `app.html`'s `display: contents` wrapper) into markup; this is safe only while no `<style>` element survives into `index.html`, since a nonce there would make Tauri's injection outrank — and therefore void — `'unsafe-inline'`. `worker-src blob:` and `media-src blob:` are hls.js: it demuxes in a worker built from a blob and attaches MSE through `URL.createObjectURL`. `asset:` and `http://asset.localhost` are the same protocol under the two naming schemes `convertFileSrc` emits (custom scheme on Linux/macOS, `http` host on Windows/Android); `ipc:`/`http://ipc.localhost` is the invoke transport, which would otherwise be blocked by `connect-src`. A run-time CSP naming the server origin exactly was rejected: Tauri computes the header from immutable config when it serves the HTML, so it would mean rebuilding config and reloading the webview on every server change, for a policy the user can already point anywhere. The asset-protocol scope narrows from `$APPDATA/**` to `$APPDATA/thumbnails/**` — since DR-137 moved downloaded media to the loopback server, `imageCache` is the only `convertFileSrc` caller left, so the database and the encrypted-token fallback file no longer sit inside the grant | Security | UR-012, UR-071 | Done |
 
 ---
@@ -471,7 +472,7 @@ Internal architecture, components, and application logic.
 | UR-004 | IR-003, IR-004, IR-008, IR-011 | DR-002, DR-004, DR-006, DR-129, DR-171, DR-176, DR-177, DR-181, DR-182, DR-183, DR-185, DR-188, DR-203 |
 | UR-005 | - | DR-001, DR-005, DR-009, DR-178, DR-179, DR-186, DR-193, DR-195 |
 | UR-006 | IR-005, IR-006, IR-007, IR-008 | DR-200, DR-201 |
-| UR-007 | IR-010 | DR-007, DR-008, DR-016, DR-257 |
+| UR-007 | IR-010 | DR-007, DR-008, DR-016, DR-257, DR-262 |
 | UR-008 | IR-010 | DR-007, DR-011 |
 | UR-009 | IR-009, IR-010, IR-011 | - |
 | UR-010 | IR-012, IR-021 | DR-037, DR-059 |
@@ -781,6 +782,9 @@ Internal architecture, components, and application logic.
 | UT-232 | A transcode's audio-track change re-opens the stream, a direct play selects in place, and an HTML5 element reloads either way — the engine is only asked to select a track the stream actually carries | DR-258 | Done |
 | UT-233 | The position a re-opened stream resumes at comes from the engine when the caller has none, and a non-finite or negative position is treated as absent rather than passed to a backend that rejects it | DR-258 | Done |
 | UT-234 | A subtitle URL targets Jellyfin's `Stream.{format}` route, asserted against the repository that builds it rather than a mock that restates it | DR-259 | Done |
+| UT-235 | The A-Z strip's last letter stays above the bottom nav, above the mini player while audio plays, and above the taller remote-mode mini player | DR-262 | Done |
+| UT-236 | The strip still fills the space it does have rather than stopping a letter short | DR-262 | Done |
+| UT-237 | The strip falls back to the viewport with no scroll container, and never computes a negative height when scrolled past its floor | DR-262 | Done |
 
 ### Integration Tests
 

src/lib/components/library/AlphabetScrollBar.svelte

@@ -1,4 +1,4 @@
-<!-- TRACES: UR-007 | DR-007 -->
+<!-- TRACES: UR-007 | DR-007, DR-262 -->
 <script lang="ts">
   /**
    * A vertical A-Z index strip for long, alphabetically-sorted lists.
@@ -6,8 +6,14 @@
    *
    * The parent owns the actual scrolling: it passes `availableLetters`
    * (which letters have items) and an `onJump(letter)` callback.
+   *
+   * The strip's floor is the scroll container's own bottom edge, measured — not
+   * the viewport minus a guess at the bottom bars. See alphabetStrip.ts for why
+   * that distinction is the whole bug (DR-262).
    */
 
+  import { stripHeightFor } from "./alphabetStrip";
+
   const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");
   const HASH = "#"; // bucket for names starting with a digit/symbol
 
@@ -16,43 +22,45 @@
     availableLetters: Set<string>;
     /** Called with the chosen letter when the user picks one. */
     onJump: (letter: string) => void;
-    /**
-     * CSS length reserved at the bottom of the viewport for the bottom nav /
-     * mini-player bars. The strip stretches to fill the space between the top
-     * sticky offset and this gap, so it ends just above those bars.
-     */
-    bottomGap?: string;
   }
 
-  let { availableLetters, onJump, bottomGap = "5rem" }: Props = $props();
+  let { availableLetters, onJump }: Props = $props();
 
-  // The strip stretches from where it sits down to just above the bottom nav /
-  // mini-player bars. Those bars are pinned to the bottom of the screen, so the
-  // hard floor is `window.innerHeight - bottomGap`. We measure the strip's own
-  // top against that floor (clamped to non-negative) and update on scroll/resize
-  // so it never slides under the bars regardless of header or platform.
   let container = $state<HTMLDivElement | null>(null);
   let stripHeight = $state(0);
 
-  function measure() {
-    if (!container) return;
-    const top = container.getBoundingClientRect().top;
-    const floor = window.innerHeight - remToPx(bottomGap);
-    stripHeight = Math.max(0, floor - top);
+  /**
+   * Nearest scrollable ancestor. Resolved by computed `overflow-y` rather than
+   * by tag name: the library routes scroll in a `<main>`, but the root shell
+   * scrolls in a plain `<div>`, and a `closest("main")` that misses falls back
+   * to the viewport — which is exactly the too-tall strip this replaced.
+   */
+  function nearestScroller(el: HTMLElement | null): HTMLElement | null {
+    let node = el?.parentElement ?? null;
+    while (node) {
+      const overflowY = getComputedStyle(node).overflowY;
+      if (overflowY === "auto" || overflowY === "scroll") return node;
+      node = node.parentElement;
+    }
+    return null;
   }
 
-  function remToPx(len: string): number {
-    const n = parseFloat(len);
-    if (len.trim().endsWith("rem")) {
-      const root = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
-      return n * root;
-    }
-    return n; // assume px otherwise
+  function measure() {
+    if (!container) return;
+    const scroller = nearestScroller(container);
+    stripHeight = stripHeightFor({
+      stripTop: container.getBoundingClientRect().top,
+      scrollerBottom: scroller?.getBoundingClientRect().bottom ?? null,
+      viewportHeight: window.innerHeight,
+    });
   }
 
   $effect(() => {
     measure();
-    const scroller = container?.closest("main");
+    const scroller = nearestScroller(container);
+    // Observing the scroller is what makes the mini player showing or hiding
+    // re-measure: it is an in-flow sibling, so the scroller resizes when it
+    // appears. No store subscription and no platform guess needed.
     const ro = new ResizeObserver(measure);
     if (scroller) ro.observe(scroller);
     scroller?.addEventListener("scroll", measure, { passive: true });
@@ -64,15 +72,6 @@
     };
   });
 
-  // Recompute when the reserved bottom gap changes (mini-player shows/hides).
-  $effect(() => {
-    // Bare read: registers `bottomGap` as a dependency of this effect. Svelte 5
-    // idiom, not a stray expression.
-    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-    bottomGap;
-    measure();
-  });
-
   const letters = $derived([HASH, ...ALPHABET]);
   let activeLetter = $state<string | null>(null);
 

src/lib/components/library/GenericMediaListPage.svelte

@@ -6,8 +6,6 @@
   import { navigateUp } from "$lib/utils/navigation";
   import { currentLibrary } from "$lib/stores/library";
   import { auth } from "$lib/stores/auth";
-  import { shouldShowAudioMiniPlayer } from "$lib/stores/player";
-  import { isAndroid } from "$lib/stores/appState";
   import SearchBar from "$lib/components/common/SearchBar.svelte";
   import SortButtonGroup from "$lib/components/common/SortButtonGroup.svelte";
   import type { SortOption } from "$lib/components/common/SortButtonGroup.svelte";
@@ -259,11 +257,6 @@
     const target = gridWrapper.querySelector(`[data-grid-index="${index}"]`);
     target?.scrollIntoView({ behavior: "smooth", block: "start" });
   }
-
-  // Bottom space the layout's <main> reserves for the nav / mini-player bars.
-  // Mirrors src/routes/library/+layout.svelte so the A-Z strip ends just above
-  // whichever bars are visible.
-  const bottomGap = $derived($shouldShowAudioMiniPlayer ? ($isAndroid ? "11rem" : "7rem") : "5rem");
 </script>
 
 <div class="space-y-6">
@@ -363,7 +356,7 @@
       </div>
       {#if showAlphaBar}
         <div class="sticky top-2 self-start flex-shrink-0 h-fit">
-          <AlphabetScrollBar {availableLetters} onJump={jumpToLetter} {bottomGap} />
+          <AlphabetScrollBar {availableLetters} onJump={jumpToLetter} />
         </div>
       {/if}
     </div>

src/lib/components/library/alphabetStrip.test.ts

@@ -0,0 +1,88 @@
+import { describe, it, expect } from "vitest";
+import { stripHeightFor, type StripHeightInput } from "./alphabetStrip";
+
+/**
+ * Regression: the A-Z jump strip ran under the mini player, so the tail of the
+ * alphabet could not be tapped.
+ *
+ * The strip used to size itself against `window.innerHeight` minus a hardcoded
+ * guess at the bottom bars' height (5rem / 7rem / 11rem, chosen by platform and
+ * whether the mini player was showing). Those bars stopped being fixed overlays
+ * when BottomUi became an in-flow flex sibling below the scroller, so the guess
+ * has no relationship to the real stack — and it is short on any device with a
+ * navigation/gesture bar, because `--safe-bottom` is padded *inside* BottomUi.
+ *
+ * The invariant every case below asserts: the strip must end at or above the
+ * scroller's own bottom edge, which is exactly the top of the mini player.
+ *
+ * TRACES: UR-007 | DR-007 | UT-235, UT-236, UT-237
+ */
+
+/** 800px-tall phone viewport; the library scroller starts 120px down. */
+const VIEWPORT = 800;
+const STRIP_TOP = 120;
+
+/** Measured heights of the real bottom UI, in CSS px. */
+const NAV = 77; // BottomNav: py-2 + icon 24 + gap 4 + label 16 + py-2, + 1px border
+const MINI = 69; // MiniPlayer: 4px progress bar + 48px artwork row + py-2, + 1px border
+const REMOTE_ROW = 32; // "Playing on <device>" banner, remote mode only
+const GESTURE_BAR = 48; // --safe-bottom on a 3-button nav device
+
+function bounds(bottomUiHeight: number): StripHeightInput {
+  return {
+    stripTop: STRIP_TOP,
+    scrollerBottom: VIEWPORT - bottomUiHeight,
+    viewportHeight: VIEWPORT,
+  };
+}
+
+describe("stripHeightFor", () => {
+  it("keeps the last letter above the bottom nav when nothing is playing", () => {
+    const input = bounds(NAV + GESTURE_BAR);
+    const bottom = STRIP_TOP + stripHeightFor(input);
+
+    expect(bottom).toBeLessThanOrEqual(input.scrollerBottom!);
+  });
+
+  it("keeps the last letter above the mini player while audio plays", () => {
+    const input = bounds(MINI + NAV + GESTURE_BAR);
+    const bottom = STRIP_TOP + stripHeightFor(input);
+
+    expect(bottom).toBeLessThanOrEqual(input.scrollerBottom!);
+  });
+
+  it("survives the taller mini player of remote mode", () => {
+    const input = bounds(REMOTE_ROW + MINI + NAV + GESTURE_BAR);
+    const bottom = STRIP_TOP + stripHeightFor(input);
+
+    expect(bottom).toBeLessThanOrEqual(input.scrollerBottom!);
+  });
+
+  it("still fills the space it does have, rather than stopping short", () => {
+    const input = bounds(MINI + NAV + GESTURE_BAR);
+    const available = input.scrollerBottom! - STRIP_TOP;
+
+    // Within one letter's worth of the space available (letters are ~16px).
+    expect(stripHeightFor(input)).toBeGreaterThan(available - 16);
+  });
+
+  it("falls back to the viewport when the strip has no scroll container", () => {
+    const height = stripHeightFor({
+      stripTop: STRIP_TOP,
+      scrollerBottom: null,
+      viewportHeight: VIEWPORT,
+    });
+
+    expect(STRIP_TOP + height).toBeLessThanOrEqual(VIEWPORT);
+  });
+
+  it("never returns a negative height when the strip is scrolled past the floor", () => {
+    const height = stripHeightFor({
+      stripTop: 900,
+      scrollerBottom: 600,
+      viewportHeight: VIEWPORT,
+    });
+
+    expect(height).toBe(0);
+  });
+});

src/lib/components/library/alphabetStrip.ts

@@ -0,0 +1,54 @@
+/**
+ * Pure geometry for the A-Z jump strip (see AlphabetScrollBar.svelte).
+ *
+ * The strip stretches from wherever it sits down to a floor, and the floor is
+ * the whole question: get it wrong and the tail of the alphabet renders past
+ * the bottom of the scroller, under the mini player / bottom nav, where it
+ * cannot be tapped.
+ *
+ * The floor is the scroller's own bottom edge — never the viewport's. The strip
+ * used to size itself as `window.innerHeight` minus a hardcoded guess at the
+ * bars' height (5rem/7rem/11rem by platform and mini-player visibility), which
+ * dates from when those bars were `position: fixed` overlays. They are in-flow
+ * flex siblings below the scroller now (see BottomUi.svelte), so the scroller's
+ * bottom edge *is* the top of the mini player, measured exactly, every frame —
+ * and the guess was short on every device with a navigation/gesture bar,
+ * because `--safe-bottom` is padded inside BottomUi and the guess never knew
+ * about it.
+ *
+ * Extracted from the component so the floor rule is unit-testable — the
+ * component only supplies measurements.
+ *
+ * TRACES: UR-007 | DR-007, DR-262
+ */
+
+/**
+ * Breathing room left under the last letter, in px. Mirrors the `top-2` sticky
+ * offset at the other end so the strip sits symmetrically in the scrollport.
+ */
+export const STRIP_BOTTOM_GAP = 8;
+
+export interface StripHeightInput {
+  /** Viewport-relative top of the strip container (`getBoundingClientRect().top`). */
+  stripTop: number;
+  /**
+   * Viewport-relative bottom edge of the scroll container the strip lives in,
+   * or `null` when the strip has no scrollable ancestor to measure.
+   */
+  scrollerBottom: number | null;
+  /** Viewport height — the fallback floor when there is no scroll container. */
+  viewportHeight: number;
+  /** Override for {@link STRIP_BOTTOM_GAP}, in px. */
+  gap?: number;
+}
+
+/** How tall the A-Z strip may be without running under the bottom bars. */
+export function stripHeightFor({
+  stripTop,
+  scrollerBottom,
+  viewportHeight,
+  gap = STRIP_BOTTOM_GAP,
+}: StripHeightInput): number {
+  const floor = scrollerBottom ?? viewportHeight;
+  return Math.max(0, floor - gap - stripTop);
+}