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/ui/tableHeader.tsx

@@ -6,7 +6,7 @@ import { PopoverItem, PopoverSurface } from "./AnchoredPopover";
 import { useAnchoredPopover } from "./anchoredPopoverHooks";
 import { useScrollFade } from "../../lib/useScrollFade";
 import { type SortState } from "../../lib/columnSort";
-import { isActive, type Column, type FilterMap } from "../../lib/tableColumns";
+import { columnHideClass, isActive, type Column, type FilterMap } from "../../lib/tableColumns";
 import { alignClass } from "./tableAlign";
 import { useStickyTop } from "./stickyTop";
 import { Button } from "./Button";
@@ -214,7 +214,7 @@ export function ColumnHead<T>({
             <th
               key={col.key}
               style={col.width ? { width: col.width } : undefined}
-              className={`relative font-medium px-2 py-2 whitespace-nowrap bg-bg ${alignClass(col.align)}${col.narrowHidden ? " hidden @2xl:table-cell" : ""}`}
+              className={`relative font-medium px-2 py-2 whitespace-nowrap bg-bg ${alignClass(col.align)}${columnHideClass(col)}`}
               aria-sort={
                 col.sortable
                   ? isSorted