styles: use fixed widths for user roles table in large screens and allow wrap text in page header

src/authz-module/components/AuthZTitle.tsx

@@ -45,9 +45,10 @@ const AuthZTitle = ({
   const isDesktop = useMediaQuery({ minWidth: breakpoints.large.minWidth });
   return (
     <div className="page-band py-4 bg-light-100">
-      { shouldRenderBreadcrumb
+      {shouldRenderBreadcrumb
       && (
         <Breadcrumb
+          className="text-break"
           linkAs={Link}
           links={navLinks}
           activeLabel={activeLabel}
@@ -56,13 +57,13 @@ const AuthZTitle = ({
       <Row>
         <Col xs={12} md={7}>
           <div className="d-flex align-items-center flex-column-sm mb-3 mb-md-0">
-            <h2 className="text-primary mb-0">{pageTitle}</h2>
+            <h2 className="text-break text-primary mb-0">{pageTitle}</h2>
             {pageSubtitle && (
               <>
                 <hr className="authz-action-divider mx-lg-3 my-md-0 mx-md-3" />
                 {typeof pageSubtitle === 'string'
-                  ? <h3 className="mb-0 font-weight-light text-gray-700">{pageSubtitle}</h3>
-                  : <div className="mb-0">{pageSubtitle}</div>}
+                  ? <h3 className="text-break mb-0 font-weight-light text-gray-700">{pageSubtitle}</h3>
+                  : <div className="text-break mb-0">{pageSubtitle}</div>}
               </>
             )}
 

src/authz-module/components/TableControlBar/TableControlBar.tsx

@@ -168,7 +168,7 @@ const TableControlBar = ({ onFilterChange, countLabel }: TableControlBarProps) =
           }
           return null;
         })}
-        {countLabel && <span className="ml-auto text-gray-500">{countLabel}</span>}
+        {countLabel && <span className="ml-auto small">{countLabel}</span>}
       </Stack>
 
       {chronologicalFilters.length > 0 && (

src/authz-module/components/TableFooter/TableFooter.tsx

@@ -23,7 +23,7 @@ const Footer = ({ showingMessage }: FooterProps) => {
   const { pageIndex } = state;
   return (
     <TableFooter>
-      <span>
+      <span className="small">
         {formatMessage(showingMessage ?? defaultShowingMessage, { pageSize: rows.length, itemCount })}
       </span>
       <Pagination

src/authz-module/index.scss

@@ -77,51 +77,41 @@
   .authz-cell-username { max-width: 15rem; }  // ~24 characters
   .authz-cell-email { max-width: 17rem; }     // ~28 characters
 
-  &.team-members-table {
+  .team-members-table {
     // Every row is two lines tall: the assigned-roles cell stacks scope over org.
     th,
     td {
       padding-top: var(--pgn-spacing-spacer-3);
       padding-bottom: var(--pgn-spacing-spacer-3);
     }
 
-    // Keep the "+N more roles" label on one line.
-    td:nth-child(4) {
-      white-space: nowrap;
-    }
-
     /*
       Auto-layout starves "Assigned roles" in favour of the short Username/Email values,
       so widths are pinned. Below `md` these percentages would crush the toggle and action
       columns, so the table falls back to content sizing and scrolls inside Paragon's
       `.pgn__data-table-container`.
+
+      A fixed table takes its widths from the header cells, but Paragon puts a column's
+      `headerClassName` on a span inside the `th`, so `:has()` lifts it to the `th`.
     */
     @media (--pgn-size-breakpoint-min-width-md) {
       .pgn__data-table {
         table-layout: fixed;
       }
 
-      th:nth-child(1) { width: 16%; }  // Username
-      th:nth-child(2) { width: 18%; }  // Email
-      th:nth-child(3) { width: 46%; }  // Assigned roles
-      th:nth-child(4) { width: 13%; }  // "+N more roles" toggle
-      th:nth-child(5) { width: 7%; }   // Actions
+      th:has(> .authz-col-username) { width: 16%; }
+      th:has(> .authz-col-email) { width: 18%; }
+      th:has(> .authz-col-assigned-roles) { width: 46%; }
+      th:has(> .authz-col-more-roles) { width: 13%; }
+      th:has(> .authz-col-actions) { width: 7%; }
 
       td {
         overflow: hidden;
       }
 
-      // The nested table sizes its own columns; it must not inherit the widths above.
-      .team-members-table__subtable {
-        .pgn__data-table {
-          table-layout: auto;
-        }
-
-        th:nth-child(1),
-        th:nth-child(2),
-        th:nth-child(3) {
-          width: auto;
-        }
+      // The nested table sizes its own columns; it must not inherit the fixed layout above.
+      .team-members-table__subtable .pgn__data-table {
+        table-layout: auto;
       }
     }
 

src/authz-module/team-members/TeamMembersTable.tsx

@@ -106,6 +106,7 @@ const TeamMembersTable = ({ presetScope }: TeamMembersTableProps) => {
 
   return (
     <DataTable
+      className="team-members-table"
       isExpandable
       isFilterable
       isPaginated
@@ -132,11 +133,14 @@ const TeamMembersTable = ({ presetScope }: TeamMembersTableProps) => {
           id: 'moreRoles',
           Header: '',
           Cell: MoreRolesToggle,
+          headerClassName: 'authz-col-more-roles',
         },
         {
           id: 'action',
           Header: intl.formatMessage(messages['authz.team.members.table.column.actions.title']),
           Cell: TeamMemberViewActionCell,
+          cellClassName: 'text-center',
+          headerClassName: 'authz-col-actions justify-content-center',
         },
       ]}
       columns={
@@ -146,6 +150,7 @@ const TeamMembersTable = ({ presetScope }: TeamMembersTableProps) => {
             Header: intl.formatMessage(messages['authz.team.members.table.column.username.title']),
             accessor: 'username',
             Cell: NameCell,
+            headerClassName: 'authz-col-username',
             filter: 'text',
             Filter: TextFilter,
             filterOrder: 1,
@@ -154,6 +159,7 @@ const TeamMembersTable = ({ presetScope }: TeamMembersTableProps) => {
             Header: intl.formatMessage(messages['authz.team.members.table.column.email.title']),
             accessor: 'email',
             Cell: EmailCell,
+            headerClassName: 'authz-col-email',
             disableFilters: true,
             filter: 'text',
             Filter: TextFilter,
@@ -162,6 +168,7 @@ const TeamMembersTable = ({ presetScope }: TeamMembersTableProps) => {
             id: 'assignedRoles',
             Header: intl.formatMessage(messages['authz.team.members.table.column.assigned.roles.title']),
             Cell: AssignedRolesCell,
+            headerClassName: 'authz-col-assigned-roles',
             disableFilters: true,
             disableSortBy: true,
           },