peter/siftlode
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(playlists): hide '#' and Channel by the table's width, not the window's (E28)

Browse Source 
Beside the playlist rail an 800 px window left the table 432 px: the fixed
columns took all of it and the title column was 0 px wide, its thumbnail
drawn over the channel. The table is an @container now and the columns hide
under 42rem of its own width (narrowHidden, was phoneHidden).
This commit is contained in:
peter
2026-09-26 20:01:04 +02:00
parent 3e7c79fa69
commit f254588409
5 changed files with 22 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Playlists.dom.test.tsx
+11 -6
View File
@@ -558,17 +558,22 @@ describe("Playlists · the header's '…'", () => {
});
});
describe("Playlists · a phone-width table", () => {
it("leaves out '#' and Channel below sm, header and cells alike, so the title keeps a width", async () => {
describe("Playlists · a narrow table", () => {
it("leaves out '#' and Channel while the TABLE is narrow, header and cells alike, so the title keeps a width", async () => {
mount({ 1: [vid("A", 0)] });
await screen.findByRole("button", { name: "card.play — Video A" });
const phoneHidden = (el: Element) =>
el.classList.contains("hidden") && el.classList.contains("sm:table-cell");
// By the table's own width (its @container), not the viewport's: beside the rail a desktop
// window left the table 432 px and the title 0.
expect(document.querySelector("table")!.parentElement!.classList.contains("@container")).toBe(
true,
);
const narrowHidden = (el: Element) =>
el.classList.contains("hidden") && el.classList.contains("@2xl:table-cell");
const heads = [...document.querySelectorAll("thead th")];
const cells = [...document.querySelectorAll("tbody tr:first-child td")];
// Columns: grip, #, title, channel, length, "…".
expect(heads.map(phoneHidden)).toEqual([false, true, false, true, false, false]);
expect(cells.map(phoneHidden)).toEqual([false, true, false, true, false, false]);
expect(heads.map(narrowHidden)).toEqual([false, true, false, true, false, false]);
expect(cells.map(narrowHidden)).toEqual([false, true, false, true, false, false]);
});
});