From f8a52993c118ab3cf07b76be51144e308115e4ab Mon Sep 17 00:00:00 2001 From: Claudio Ortolina Date: Thu, 30 Apr 2026 07:21:25 +0100 Subject: [PATCH] ML-149: Fix selected bar not showing track data in Safari --- ...selection-bar-text-visibility-in-Safari.md | 62 +++++++++++++++++++ lib/music_library_web/components/release.ex | 2 +- 2 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 backlog/tasks/ml-149 - Fix-release-selection-bar-text-visibility-in-Safari.md diff --git a/backlog/tasks/ml-149 - Fix-release-selection-bar-text-visibility-in-Safari.md b/backlog/tasks/ml-149 - Fix-release-selection-bar-text-visibility-in-Safari.md new file mode 100644 index 00000000..bcec2447 --- /dev/null +++ b/backlog/tasks/ml-149 - Fix-release-selection-bar-text-visibility-in-Safari.md @@ -0,0 +1,62 @@ +--- +id: ML-149 +title: Fix release selection bar text visibility in Safari +status: Done +assignee: + - Codex +created_date: '2026-04-30 06:11' +updated_date: '2026-04-30 06:20' +labels: + - bug + - ui +dependencies: [] +references: + - lib/music_library_web/components/release.ex +priority: medium +--- + +## Description + + +When multiple tracks are selected in the release UI, the `selection_bar` component should show its left-hand selection text consistently across supported browsers. The current behavior shows the text in Chrome but leaves it invisible in Safari. + + +## Acceptance Criteria + +- [x] #1 The left-hand selection text is visible in Safari when multiple tracks are selected. +- [x] #2 The existing Chrome rendering remains unchanged or visually equivalent. +- [x] #3 The fix is scoped to the release selection bar and does not alter unrelated release controls. +- [x] #4 Relevant formatting and focused verification are run or any inability to run them is documented. + + +## Implementation Plan + + +1. Read the project conventions and inspect `lib/music_library_web/components/release.ex` plus nearby CSS/assets that affect `selection_bar`. +2. Identify the Safari-specific style interaction causing the left selection text to be invisible when multiple tracks are selected. +3. Apply the smallest scoped change to the release selection bar so the text remains visible in Safari while preserving Chrome rendering. +4. Run formatting and focused verification, then update acceptance criteria and final notes. + + +## Implementation Notes + + +Changed the selection bar wrapper from the non-existent `isolated` class to Tailwind's `isolate` utility, giving the sticky bar an explicit `isolation: isolate` stacking context. This is scoped to `lib/music_library_web/components/release.ex` and targets Safari's sticky/composited paint issue where the left summary text was not visible. Ran `mix format lib/music_library_web/components/release.ex` and `mix test test/music_library_web/components/release_test.exs` successfully. Manual Safari browser verification was not available in this environment. + +User reported that changing `isolated` to `isolate` did not fix the Safari visibility issue. Reopened the task for further investigation. + +Applied a second scoped patch after the first attempt failed: the sticky selection bar now uses `transform-gpu` to force a composited layer in WebKit, and the left text block uses `relative z-10 flex-auto` instead of `flex-1` so Safari has an explicit paint/layer order and content-based flex basis. `mix format lib/music_library_web/components/release.ex` and `mix test test/music_library_web/components/release_test.exs` both pass. Waiting for user confirmation before checking the Safari acceptance criteria or closing the task. + +User isolated the fix in Safari: `relative` on the selection bar's left text container fixes the invisible text. The earlier `isolate`, `transform-gpu`, `z-10`, and `flex-auto` changes were unnecessary and have been removed. The final code change is only `relative` on the existing `min-w-0 flex-1 leading-tight` container. Ran `mix format lib/music_library_web/components/release.ex` and `mix test test/music_library_web/components/release_test.exs` successfully. + + +## Final Summary + + +Added `relative` to the left text container inside the release `selection_bar`. Safari was failing to visibly paint that text when tracks were selected; the positioned container fixes the rendering issue without changing the selection bar layout, colors, or actions. + +Verification: +- User confirmed in Safari that `relative` is the change that fixes the issue. +- `mix format lib/music_library_web/components/release.ex` +- `mix test test/music_library_web/components/release_test.exs` + diff --git a/lib/music_library_web/components/release.ex b/lib/music_library_web/components/release.ex index 2382a992..b598319a 100644 --- a/lib/music_library_web/components/release.ex +++ b/lib/music_library_web/components/release.ex @@ -440,7 +440,7 @@ defmodule MusicLibraryWeb.Components.Release do ~H"""
-
+

{ngettext("%{count} track selected", "%{count} tracks selected", @count, count: @count)}