Tags: viewi/ui
Tags
Let the DataTable scroll sideways instead of widening the page The table was emitted bare, so on a phone a list with more than two or three columns pushed the whole document wider than the viewport and left every other block on the page scrolling horizontally with it. Wrapping it in .table-responsive keeps the overflow inside the table. The if moves from the table to the new wrapper: it was the only thing suppressing an empty table when the list is empty, and the empty state that follows is a separate if, not an else, so nothing else had to change. The toolbar and the paging row take .stack-sm's companion .center-sm (from Pupils' admin.css) so the action buttons and the pager sit in the middle of the collapsed column rather than jammed against its right edge. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
EmptyState component + DataTable empty states New EmptyState (icon tile + title + description + optional CTA/action slot) for empty lists and screens, theme-aware in light and dark. DataTable now uses it instead of rendering a bare header over blank space, and distinguishes the two causes of 'no rows': - genuinely empty -> tailored copy (emptyIcon/emptyTitle/emptyText props, or the 'empty' slot to replace the block) plus the same create action as the Add button - filtered to nothing by the search -> 'No matches' + 'Clear search', never an 'add your first' CTA The search box is bound to searchValue so Clear search visibly resets it, and the paging row is hidden when there is nothing to page.