fix(ui): reserve shadow room in album rails so themes need no overflow hack (#1300)

* fix(ui): reserve shadow room in album rails so themes need no overflow hack

A horizontal album rail scrolls, so it clips — `overflow-x: auto` makes
`overflow-y` compute to `auto` as well — and an outer card shadow gets
cut off at the edges. The default theme never hit this (rail cards use
inset shadows only), but a theme with a real drop shadow did, and the
only way out was overriding `overflow` on `.album-grid`. That removes
the scroll container the nav arrows drive, so the arrows go dead.

Reserve the room inside the clip box instead: pad the rail and cancel
the padding with a matching negative margin, so the content box stays
exactly where it was. The amount is a `--rail-shadow-room` token, so a
theme with a larger shadow or glow raises that instead of touching
`overflow`.

* docs(changelog): note album rail shadow room fix (#1300)

CHANGELOG.md

@@ -357,6 +357,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * The Discord community banner rendered its icon at an enormous size on Windows, pushing the message out of the bar. The icon now has a fixed size on every platform.
 
+### Themes — album rails no longer cut off card shadows
+
+**By [@Psychotoxical](https://github.com/Psychotoxical), reported by Asra on the Psysonic Discord, PR [#1300](https://github.com/Psychotoxical/psysonic/pull/1300)**
+
+* Horizontal album rails clipped an outer card shadow at the edges, which only themes that use a real drop shadow ran into. Working around it meant overriding the rail's `overflow`, and that disabled the rail's `<` / `>` scroll arrows. Rails now reserve room for the shadow inside the rail itself, so the arrows keep working; a theme that needs more room can raise `--rail-shadow-room` instead of touching `overflow`.
+
 
 ## [1.49.0] - 2026-06-29
 

src/styles/components/album-row-container.css

@@ -51,7 +51,15 @@
   display: flex;
   gap: var(--space-4);
   overflow-x: auto;
-  padding-bottom: var(--space-4);
+  /* The rail scrolls, so it clips: `overflow-x: auto` makes `overflow-y` compute
+     to `auto` too. An outer card shadow would be cut off at the edges. Padding
+     gives it room to paint *inside* the clip box; the matching negative margin
+     keeps the rail's content box exactly where it was, so nothing shifts.
+     Without this, a theme with a drop shadow is pushed into overriding `overflow`
+     — which removes the scroll container the nav arrows drive, disabling them. */
+  padding: var(--rail-shadow-room) var(--rail-shadow-room)
+    max(var(--space-4), var(--rail-shadow-room));
+  margin: calc(-1 * var(--rail-shadow-room)) calc(-1 * var(--rail-shadow-room)) 0;
   scroll-snap-type: none;
   scroll-behavior: smooth;
   /* Hide scrollbar for Webkit */

src/styles/themes/global-base-settings.css

@@ -35,5 +35,13 @@
   /* Layout */
   --sidebar-width: 220px;
   --player-height: 88px;
+
+  /* Room reserved inside a horizontal card rail's clip box so an outer card
+     shadow has somewhere to paint. A rail scrolls, so it must clip (its
+     `overflow-x: auto` makes `overflow-y` compute to `auto`), and a drop shadow
+     would otherwise be cut off at the edges. Raise this in a theme that uses a
+     larger shadow or glow — never override `overflow` on the rail itself, which
+     would remove its scrollability and disable its nav arrows. */
+  --rail-shadow-room: 8px;
 }