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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user