Team members table: fill height + pagination, relocate Leave team button#2109
Merged
Merged
Conversation
…ocate Leave team button DataTable gains an opt-in pageSize prop (unused consumers unaffected); TeamSettingsMembersTable uses it at 20/page. The Members section is now a full-height flex layout so the table stops 24px from the viewport bottom instead of shrinking to content height. "Leave team" moves out of the settings sidebar (previously visible on every section) into the Members section header, 24px right of the title — extracted into its own LeaveTeamButton component. Continues the not-yet-design-reviewed placement from #2085 (AUTHZ-09). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…size select, first/last nav) Replace the simple prev/next + "page x/y" footer with a persistent two-container bar matching the requested layout: total item count on the left; on the right, a rows-per-page Select (20/50/100), first/prev/page-number/next/last IconButtons (medium, our own components, not MUI). Footer height now matches a table row and is always shown (not hidden on a single page), so the count and page-size control stay reachable. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…the right group) Left container gets 16px padding-left; right container's items are all vertically aligned in a flex row with an 8px gap, plus 16px padding-right. Moved the horizontal padding off the shared footer onto each container so they don't stack. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Rows-per-page Select now renders compact (no reserved space for its below-field hint/error message, unused here). The page indicator shows "Page N" instead of the bare number, at a fixed 4.5rem width so the neighbouring nav buttons don't shift as the digit count changes. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
The trailing error-message span was always rendered, even empty — its container's flex `gap` still applied between it and the trigger regardless of the span's own (zero) height, adding 4px a compact Select shouldn't have. Only render it when there's an error to show or the Select isn't compact, so a compact+errorless Select (the DataTable pagination page-size picker) is exactly its trigger's height. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
…f row count DataTable was one big CSS grid (header + rows + footer as grid items), so with few rows the footer sat right after the last row instead of at the table's bottom edge. Restructured: the outer container is now a flex column with two children — `.datatable-body` (the header+rows grid, unchanged internally, now `flex: 1; min-height: 0; overflow: auto` so it stretches to fill the available height) and the footer as its flex sibling, always anchored at the bottom. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
… add its label - Page-number container: 4.5rem -> 3.5rem (-8px). - Rows-per-page Select gets a margin-right on top of the footer's own gap, so it doesn't read as glued to the label/nav buttons next to it. - New "Items per page" label to its right (i18n: dataTable.pagination.itemsPerPage, fr/en). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
DataTablegains an opt-in pagination footer (total count, rows-per-page select 20/50/100, first/prev/page-number/next/last nav) — existing consumers (AdminTeamsPage,MigrationPage,CapabilitiesPage) are unaffected since it's opt-in via a newpageSizeprop.LeaveTeamButtoncomponent.Test plan
make code-quality(tsc + prettier + eslint) passesmake test— 601/601 passing, including newDataTablepagination testsCloses #2108. Continues #2085 (AUTHZ-09) for the button relocation.
🤖 Generated with Claude Code