diff --git a/CHANGELOG.md b/CHANGELOG.md index a9c17170..49a871b4 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/styles/components/album-row-container.css b/src/styles/components/album-row-container.css index a7142072..b3c19824 100644 --- a/src/styles/components/album-row-container.css +++ b/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 */ diff --git a/src/styles/themes/global-base-settings.css b/src/styles/themes/global-base-settings.css index 917781d9..010a05ff 100644 --- a/src/styles/themes/global-base-settings.css +++ b/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; }