Rows expanded unboundedly because `fixedHeader: true` + a fixed `height`
forced a scroll container that filled itself with stretched rows on short
result sets. Pagination text rendered white-on-white because the shared
button base (app-shell.css) redefines `--app-color` as `--app-primary-inverse`
in the button scope, so `color: var(--app-color)` in an override resolves
to white. Sort-column headers looked misaligned because Grid.js uses floats
to place label and sort icon, which ignore the cell's vertical-align.
- Sticky header is now opt-in; default scroll behavior is page-level.
- Row heights come from padding + line-height only (no fixed `height`).
- Pagination buttons theme via `--app-background-color`/`--app-color`
redefinition (the Pico convention) using `--app-form-element-color`,
which is not shadowed in the button scope. `margin-inline-start: auto`
on `.gridjs-pages` guarantees right-alignment even without a summary.
- Sort headers use `inline-block` + `vertical-align: middle` instead of
vendor floats so label and icon share one cross-axis center.
- Loading UX replaced with a real `<table>` skeleton that mirrors the
final column count + outer layout (card + footer with summary and
5 pager placeholders). Grid.js mount point is hidden via
`.app-grid-shell-loading > :not(.app-grid-skeleton)` — vendor wraps
its own `.gridjs-container` one level deeper, so a direct-child
selector on the mount element is required.
- Re-fetch state shows a thin top progress bar + faded tbody (GitHub
pattern) so existing data stays as context.
- `prefers-reduced-motion` disables all skeleton/progress animations.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
fs
4cf4ccc595