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
@@ -7,7 +7,8 @@ import { Button } from "../../components/ui/Button";
* `count` is the rows shown, what an action covers; `hidden` the selected ones a filter hides, which
* it leaves alone. With only hidden ones the actions stay in place, off, and the way out stays on.
* Below `xl` the buttons are glyphs named in their tooltips: in words the row wraps there, and the
* first tick would push the list from under the second tap. */
* first tick would push the list from under the second tap. On a phone the count is its number and
* the undo pair stays out, for the same one row. */
export function SelectionBand({
ref,
count,
@@ -40,7 +41,16 @@ export function SelectionBand({
return (
<div ref={ref} className="flex items-center gap-1 mt-1 flex-wrap xl:gap-2">
<span role="status" className="text-xs whitespace-nowrap">
<span className="font-medium">{t("playlists.selectedCount", { count })}</span>
<span className="sr-only font-medium sm:not-sr-only">
{t("playlists.selectedCount", { count })}
</span>
<span
aria-hidden="true"
title={t("playlists.selectedCount", { count })}
className="font-medium sm:hidden"
>
{count}
</span>
{hidden > 0 && (
<span className="text-muted">
<span aria-hidden="true" className="hidden xl:inline">
@@ -117,7 +127,7 @@ export function SelectionBand({
<span className="hidden xl:inline">{t("playlists.clearView")}</span>
</Button>
)}
<div className="ml-auto">{trailing}</div>
<div className="ml-auto hidden sm:block">{trailing}</div>
</div>
);
}