feat(player): the side panel's list controls and watch toggle are glyphs on one line

The queue row (previous, count, next, auto-advance, loop) wrapped onto three lines in the
narrow side panel; glyph-only, it fits one. Mark watched joins the action icons as a toggle
(check / double check). Every control keeps its full name and shortcut as its tooltip and
accessible name; the docked bar keeps its labels. The related switch moves up to the toolbar
rung (12px), and its second side reads just "Trending".

frontend/src/features/player/PlayerModal.dom.test.tsx

@@ -509,6 +509,28 @@ describe("PlayerModal — no side strips", () => {
     expect(row.className).not.toMatch(/px-14/);
   });
 
+  // The panel is narrow: worded, the queue row wrapped onto three lines. Each glyph keeps its name.
+  it("keeps the panel's queue row and the watch toggle to glyphs, each still named", () => {
+    vi.spyOn(api, "videoDetail").mockReturnValue(new Promise(() => {}));
+    const A = vid("A", 0);
+    const B = vid("B", 0);
+    renderModal(
+      <PlayerModal video={A} queue={[A, B]} startIndex={0} onClose={() => {}} onState={() => {}} />,
+    );
+    const named = [
+      "player.previous",
+      "player.next",
+      /^player\.autoAdvance\.label: /,
+      /^player\.loop\.label: /,
+      "player.markWatched",
+    ];
+    for (const name of named) {
+      const [button] = screen.getAllByRole("button", { name });
+      expect(button!.textContent!.trim(), String(name)).toBe("");
+      expect(button!.querySelector("svg"), String(name)).not.toBeNull();
+    }
+  });
+
   it("closes from one icon-only button", () => {
     vi.spyOn(api, "videoDetail").mockReturnValue(new Promise(() => {}));
     const onClose = vi.fn();