feat(tables): a glyph pager with first/last, and tablet-width columns step aside

The pager is four named arrows round the page box (first, previous,
next, last). A table hides a tabletHidden column below 64rem of its own
width, as narrowHidden does below 42rem, through one shared helper that
also hides the column's <col>. The Channels table drops Prio, About and
Length there: at 1024 the channel name had 60 px.

frontend/src/components/Playlists.tsx

@@ -46,7 +46,13 @@ import { usePref } from "../lib/usePref";
 import { navItemAttrs } from "../lib/listNav";
 import { ColumnHead } from "./ui/tableHeader";
 import { alignClass } from "./ui/tableAlign";
-import { filterRows, isActive, type Column, type FilterMap } from "../lib/tableColumns";
+import {
+  columnHideClass,
+  filterRows,
+  isActive,
+  type Column,
+  type FilterMap,
+} from "../lib/tableColumns";
 import { GRIP_KEY, playlistColumns } from "./playlistColumns";
 import { useSortableA11y, useSortableItem } from "./ui/sortableA11y";
 import { DragHandle } from "./ui/DragHandle";
@@ -127,7 +133,7 @@ function Row({
         <td
           key={col.key}
           style={col.width ? { width: col.width } : undefined}
-          className={`px-2 py-1.5 align-middle ${col.nowrap ? "whitespace-nowrap" : ""} ${alignClass(col.align)}${col.narrowHidden ? " hidden @2xl:table-cell" : ""}`}
+          className={`px-2 py-1.5 align-middle ${col.nowrap ? "whitespace-nowrap" : ""} ${alignClass(col.align)}${columnHideClass(col)}`}
         >
           {col.key === GRIP_KEY ? (
             // The one cell the column defs can't render: the handle needs this row's sortable