forked from fa/breadcrumb-the-shire
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>