feat(authz): refine audit user page layout and spacing

src/authz-module/audit-user/index.tsx

@@ -250,8 +250,9 @@ const AuditUserPage = () => {
             <AddRoleButton presetUsername={user?.username} key="add-role-button" />,
           ]
         }
+        showDivider
       >
-        <div className="page-band py-5">
+        <div className="page-band py-3">
           <DataTable
             isPaginated
             isFilterable

src/authz-module/components/AuthZTitle.test.tsx

@@ -100,4 +100,16 @@ describe('AuthZTitle', () => {
     expect(screen.getByRole('button', { name: 'Save' })).toBeInTheDocument();
     expect(screen.getByRole('region', { name: 'custom action area' })).toBeInTheDocument();
   });
+
+  it('does not render the bottom border by default', () => {
+    render(<AuthZTitle {...defaultProps} />);
+    const band = screen.getByRole('heading', { level: 2 }).closest('.page-band');
+    expect(band).not.toHaveClass('title-border-bottom');
+  });
+
+  it('renders the bottom border when borderBottom is true', () => {
+    render(<AuthZTitle {...defaultProps} showDivider />);
+    const band = screen.getByRole('heading', { level: 2 }).closest('.page-band');
+    expect(band).toHaveClass('title-border-bottom');
+  });
 });

src/authz-module/components/AuthZTitle.tsx

@@ -26,6 +26,7 @@ export interface AuthZTitleProps {
   pageSubtitle?: string | ReactNode;
   navLinks?: BreadcrumbLink[];
   actions?: (Action | ReactNode)[];
+  showDivider?: boolean;
 }
 
 export const ActionButton = ({ label, icon, onClick }: Action) => (
@@ -39,12 +40,12 @@ export const ActionButton = ({ label, icon, onClick }: Action) => (
 );
 
 const AuthZTitle = ({
-  activeLabel, navLinks = [], pageTitle, pageSubtitle, actions = [],
+  activeLabel, navLinks = [], pageTitle, pageSubtitle, actions = [], showDivider = false,
 }: AuthZTitleProps) => {
   const shouldRenderBreadcrumb = activeLabel || navLinks?.length > 0;
   const isDesktop = useMediaQuery({ minWidth: breakpoints.large.minWidth });
   return (
-    <div className="page-band py-4 bg-light-100">
+    <div className={`page-band py-4 bg-light-100${showDivider ? ' title-border-bottom' : ''}`}>
       { shouldRenderBreadcrumb
       && (
         <Breadcrumb

src/authz-module/index.scss

@@ -3,6 +3,22 @@
 .authz-module {
   --height-action-divider: 30px;
 
+  // Paragon scrolls the layout wrapper ≤1400px, which clips the table's box-shadow;
+  // the inner .pgn__data-table-container already handles horizontal scroll.
+  .pgn__data-table-layout-wrapper {
+    overflow-x: visible;
+
+    // A flex item won't shrink below its content by default, so without this the main
+    // column grows to the table's width and the inner container never gets to scroll.
+    .pgn__data-table-layout-main {
+      min-width: 0;
+    }
+  }
+
+  .title-border-bottom {
+    border-bottom: var(--pgn-size-nav-tabs-border-width) solid var(--pgn-color-nav-tabs-base-border-base);
+  }
+
   .filters .dropdown-toggle::after {
     display: none !important;
   }