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:
@@ -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. */}
|
||||
|
||||
Reference in New Issue
Block a user