fix(playlists): the list's name keeps its room on a narrow window

Below xl Unsynced is its dot; on a phone the cover is gone, Play all is its
glyph, the band's count is its number and the undo pair stays out. The name was
0 px wide in Hungarian at 768 and on any phone, and a tick moved the list there.
This commit is contained in:
2026-11-01 23:07:42 +01:00
parent bf54a3ce5f
commit 9b76d2f96c
4 changed files with 66 additions and 7 deletions
+6 -3
View File
@@ -1174,7 +1174,9 @@ function PlaylistDetail() {
cover plus a fourth block under it, for roughly twice this height. */}
<div className="px-4 py-2 max-w-5xl mx-auto">
<div className="flex gap-3 items-center">
<div className="w-20 h-11.25 rounded-lg bg-card overflow-hidden shrink-0">
{/* Off on a phone, and the state's word and Play all's shrink: past them the list's name had
no width left at all. */}
<div className="hidden w-20 h-11.25 rounded-lg bg-card overflow-hidden shrink-0 sm:block">
{items[0]?.thumbnail_url && (
<RemoteImage
src={items[0].thumbnail_url}
@@ -1217,16 +1219,17 @@ function PlaylistDetail() {
className="inline-flex items-center gap-1.5 text-2xs text-accent mr-1"
>
<span className="w-1.5 h-1.5 rounded-full bg-accent" />
{t("playlists.unsynced")}
<span className="sr-only xl:not-sr-only">{t("playlists.unsynced")}</span>
</span>
)}
<Button
size="sm"
onClick={() => shown.length && openPlayer(shown[0]!.id)}
disabled={!shown.length}
label={t("playlists.playAll")}
icon={<Play className="fill-current" />}
>
{t("playlists.playAll")}
<span className="hidden sm:inline">{t("playlists.playAll")}</span>
</Button>
{/* Rename, the pin, YouTube (open / push / revert) and Delete: the list's ONE
menu, the same the rail row opens — the header keeps Play all. */}