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/DataTable.tsx

@@ -6,7 +6,7 @@ import { hasPagerContent } from "./pagerContent";
 import { PageToolbar } from "./PageShell";
 import { ColumnHead } from "./tableHeader";
 import { alignClass } from "./tableAlign";
-import { filterRows, type Column, type FilterMap } from "../../lib/tableColumns";
+import { columnHideClass, filterRows, type Column, type FilterMap } from "../../lib/tableColumns";
 import { navItemAttrs, useListNav } from "../../lib/listNav";
 import { useMediaQuery } from "../../lib/useMediaQuery";
 import { SURFACE } from "./surfaces";
@@ -286,7 +286,8 @@ export default function DataTable<T>({
           DOM query two copies of each row. `md` (48rem) is the breakpoint the CSS used.
           Wide screens: table. The wrapper isn't clipped so header filter popovers can overflow. */}
       {wide ? (
-        <div>
+        // A container, so a column hides by the table's own width (`tabletHidden`), not the window's.
+        <div className="@container">
           <table className={`w-full border-collapse text-sm ${fixedLayout ? "table-fixed" : ""}`}>
             {/* In fixed-layout mode a colgroup drives the column widths: those with an explicit
               `width` keep it, and the unspecified (fluid) columns split the remainder — so the
@@ -294,7 +295,11 @@ export default function DataTable<T>({
             {fixedLayout && (
               <colgroup>
                 {columns.map((col) => (
-                  <col key={col.key} style={col.width ? { width: col.width } : undefined} />
+                  <col
+                    key={col.key}
+                    style={col.width ? { width: col.width } : undefined}
+                    className={columnHideClass(col, "col") || undefined}
+                  />
                 ))}
               </colgroup>
             )}
@@ -319,7 +324,7 @@ export default function DataTable<T>({
                     <td
                       key={col.key}
                       style={col.width ? { width: col.width } : undefined}
-                      className={`px-2 py-2 align-middle ${col.nowrap ? "whitespace-nowrap" : ""} ${alignClass(col.align)}`}
+                      className={`px-2 py-2 align-middle ${col.nowrap ? "whitespace-nowrap" : ""} ${alignClass(col.align)}${columnHideClass(col)}`}
                     >
                       {col.render(row)}
                     </td>