From bf5f75bc8c711cea816947c1671970a47df135d1 Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Tue, 22 Sep 2026 21:55:04 +1000
Subject: [PATCH 1/7] fix: restore authz bg styles but keep content cap to
 header xl

---
 src/Main.test.tsx                             |   5 -
 src/Main.tsx                                  |   5 +-
 src/authz-module/audit-user/index.tsx         |  18 +--
 src/authz-module/authz-home/index.tsx         |  41 +++--
 src/authz-module/components/AuthZLayout.tsx   |  24 +--
 src/authz-module/components/AuthZTitle.tsx    |  12 +-
 src/authz-module/index.scss                   |   8 +-
 .../AssignRoleWizard.tsx                      |   4 +-
 .../AssignRoleWizardPage.tsx                  |   1 -
 .../roles-permissions/RolesPermissions.tsx    |   4 +-
 .../team-members/TeamMembersTable.tsx         | 144 +++++++++---------
 src/style.scss                                |  21 ++-
 12 files changed, 140 insertions(+), 147 deletions(-)

diff --git a/src/Main.test.tsx b/src/Main.test.tsx
index 0cf848f2..8e512dd6 100644
--- a/src/Main.test.tsx
+++ b/src/Main.test.tsx
@@ -23,9 +23,4 @@ describe('Main', () => {
     const { getByTestId } = renderWrapper(<Main />);
     expect(getByTestId('authz-module')).toBeInTheDocument();
   });
-
-  it('wraps the body in an xl container to align it with the header', () => {
-    const { getByTestId } = renderWrapper(<Main />);
-    expect(getByTestId('authz-module').closest('.container-mw-xl')).toBeInTheDocument();
-  });
 });
diff --git a/src/Main.tsx b/src/Main.tsx
index 44cdeff9..a668e205 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -1,5 +1,4 @@
 import { CurrentAppProvider, PageWrap, getSiteConfig, useIntl } from '@openedx/frontend-base';
-import { Container } from '@openedx/paragon';
 import { Helmet } from 'react-helmet';
 
 import { appId } from './constants';
@@ -20,9 +19,7 @@ const Main = () => {
         </title>
       </Helmet>
       <PageWrap>
-        <Container size="xl" fluid className="px-0">
-          <AuthZModule />
-        </Container>
+        <AuthZModule />
       </PageWrap>
     </CurrentAppProvider>
   );
diff --git a/src/authz-module/audit-user/index.tsx b/src/authz-module/audit-user/index.tsx
index ce852441..7e35616f 100644
--- a/src/authz-module/audit-user/index.tsx
+++ b/src/authz-module/audit-user/index.tsx
@@ -3,9 +3,7 @@ import {
   useContext, useEffect, useMemo, useState,
 } from 'react';
 import { SiteContext, useIntl } from '@openedx/frontend-base';
-import {
-  Container, DataTable,
-} from '@openedx/paragon';
+import { DataTable } from '@openedx/paragon';
 import TableFooter from '@src/authz-module/components/TableFooter/TableFooter';
 import {
   AUTHZ_HOME_PATH, TABLE_DEFAULT_PAGE_SIZE,
@@ -228,7 +226,7 @@ const AuditUserPage = () => {
   };
 
   return (
-    <div className="authz-module">
+    <>
       <ConfirmDeletionModal
         isOpen={showConfirmDeletionModal}
         close={handleCloseConfirmDeletionModal}
@@ -243,11 +241,6 @@ const AuditUserPage = () => {
         }}
       />
       <AuthZLayout
-        context={{
-          id: '',
-          org: '',
-          title: '',
-        }}
         navLinks={navLinks}
         activeLabel={user?.username || ''}
         pageTitle={user?.username || ''}
@@ -258,7 +251,7 @@ const AuditUserPage = () => {
           ]
         }
       >
-        <Container className="bg-light-200 p-5">
+        <div className="page-band py-5">
           <DataTable
             isPaginated
             isFilterable
@@ -283,10 +276,9 @@ const AuditUserPage = () => {
             <DataTable.Table />
             <TableFooter />
           </DataTable>
-
-        </Container>
+        </div>
       </AuthZLayout>
-    </div>
+    </>
   );
 };
 
diff --git a/src/authz-module/authz-home/index.tsx b/src/authz-module/authz-home/index.tsx
index 03fa3fc7..1c0702dc 100644
--- a/src/authz-module/authz-home/index.tsx
+++ b/src/authz-module/authz-home/index.tsx
@@ -21,29 +21,26 @@ const AuthzHome = () => {
   const pageTitle = intl.formatMessage(messages['authz.manage.page.title']);
 
   return (
-    <div className="authz-module">
-      <AuthZLayout
-        context={{ id: '', title: '', org: '' }}
-        pageTitle={pageTitle}
-        pageSubtitle=""
-        actions={
-          [<AddRoleButton key="add-role-button" />]
-        }
+    <AuthZLayout
+      pageTitle={pageTitle}
+      pageSubtitle=""
+      actions={
+        [<AddRoleButton key="add-role-button" />]
+      }
+    >
+      <Tabs
+        variant="tabs"
+        defaultActiveKey={hash ? 'permissionsRoles' : 'team'}
+        className="page-band bg-light-100"
       >
-        <Tabs
-          variant="tabs"
-          defaultActiveKey={hash ? 'permissionsRoles' : 'team'}
-          className="bg-light-100 px-5"
-        >
-          <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="p-5 bg-light-200">
-            <TeamMembersTable presetScope={presetScope} />
-          </Tab>
-          <Tab id="libraries-permissions-roles-tab" eventKey="permissionsRoles" title={intl.formatMessage(messages['authz.tabs.permissionsRoles'])}>
-            <RolesPermissions />
-          </Tab>
-        </Tabs>
-      </AuthZLayout>
-    </div>
+        <Tab eventKey="team" title={intl.formatMessage(messages['authz.tabs.team'])} className="page-band py-5">
+          <TeamMembersTable presetScope={presetScope} />
+        </Tab>
+        <Tab id="libraries-permissions-roles-tab" eventKey="permissionsRoles" title={intl.formatMessage(messages['authz.tabs.permissionsRoles'])} className="page-band py-5">
+          <RolesPermissions />
+        </Tab>
+      </Tabs>
+    </AuthZLayout>
   );
 };
 
diff --git a/src/authz-module/components/AuthZLayout.tsx b/src/authz-module/components/AuthZLayout.tsx
index e657c493..4c714766 100644
--- a/src/authz-module/components/AuthZLayout.tsx
+++ b/src/authz-module/components/AuthZLayout.tsx
@@ -3,19 +3,21 @@ import AuthZTitle, { AuthZTitleProps } from './AuthZTitle';
 
 interface AuthZLayoutProps extends AuthZTitleProps {
   children: ReactNode;
-  context: {
-    id: string;
-    org: string;
-    title: string;
-  };
 }
 
-const AuthZLayout = ({ children, ...props }: AuthZLayoutProps) => (
-  <>
-    <AuthZTitle {...props} />
-    {children}
-  </>
-
+/**
+ * Page chrome for the authz module: the title band, then the body below it.
+ * The body only paints its colour, edge to edge. Each page marks the parts of its
+ * content that should line up with the header using `page-band`, so anything meant
+ * to bleed across the full width -- a stepper header, a toolbar -- simply omits it.
+ */
+const AuthZLayout = ({ children, ...titleProps }: AuthZLayoutProps) => (
+  <div className="authz-module">
+    <AuthZTitle {...titleProps} />
+    <div className="bg-light-200">
+      {children}
+    </div>
+  </div>
 );
 
 export default AuthZLayout;
diff --git a/src/authz-module/components/AuthZTitle.tsx b/src/authz-module/components/AuthZTitle.tsx
index 229c8cb6..a204453c 100644
--- a/src/authz-module/components/AuthZTitle.tsx
+++ b/src/authz-module/components/AuthZTitle.tsx
@@ -3,7 +3,7 @@ import {
 } from 'react';
 import { Link } from 'react-router-dom';
 import {
-  Breadcrumb, Col, Container, Row, Button,
+  Breadcrumb, Col, Row, Button,
   Stack,
   useMediaQuery,
   breakpoints,
@@ -42,7 +42,7 @@ const AuthZTitle = ({
 }: AuthZTitleProps) => {
   const isDesktop = useMediaQuery({ minWidth: breakpoints.large.minWidth });
   return (
-    <Container className="p-5 bg-light-100">
+    <div className="page-band py-5 bg-light-100">
       <Breadcrumb
         linkAs={Link}
         links={navLinks}
@@ -53,8 +53,8 @@ const AuthZTitle = ({
           <div className="d-flex align-items-center flex-column-sm">
             <h2 className="text-primary mb-0">{pageTitle}</h2>
             {typeof pageSubtitle === 'string'
-              ? <> { pageSubtitle !== '' && <hr className="mx-lg-3" /> }<h3 className="mb-0 py-2 font-weight-light text-gray-700">{pageSubtitle}</h3></>
-              : <>{ pageSubtitle !== '' && <hr className="mx-lg-3" /> } <div className="mb-0">{pageSubtitle}</div></>}
+              ? <> { pageSubtitle !== '' && <hr className="authz-action-divider mx-lg-3" /> }<h3 className="mb-0 py-2 font-weight-light text-gray-700">{pageSubtitle}</h3></>
+              : <>{ pageSubtitle !== '' && <hr className="authz-action-divider mx-lg-3" /> } <div className="mb-0">{pageSubtitle}</div></>}
 
           </div>
         </Col>
@@ -72,7 +72,7 @@ const AuthZTitle = ({
                   <Fragment key={`authz-header-action-${key}`}>
                     {content}
                     {(index === actions.length - 1) ? null
-                      : (<hr className="mx-lg-5" />)}
+                      : (<hr className="authz-action-divider mx-lg-5" />)}
                   </Fragment>
                 );
               })
@@ -80,7 +80,7 @@ const AuthZTitle = ({
           </Stack>
         </Col>
       </Row>
-    </Container>
+    </div>
   );
 };
 
diff --git a/src/authz-module/index.scss b/src/authz-module/index.scss
index 99586edd..394ebe94 100644
--- a/src/authz-module/index.scss
+++ b/src/authz-module/index.scss
@@ -24,16 +24,12 @@
     min-height: 700px;
   }
 
-  hr {
+  .authz-action-divider {
     border-right: var(--pgn-size-border-width) solid var(--pgn-color-border);
     height: var(--height-action-divider);
     width: 0;
   }
 
-  .tab-content {
-    background-color: var(--pgn-color-light-200);
-  }
-
   .collapsible-card {
     border: none;
 
@@ -71,7 +67,7 @@
     .flex-column-sm {
       flex-direction: column;
     }
-    hr {
+    .authz-action-divider {
       border-top: var(--pgn-size-border-width) solid var(--pgn-color-border);
       border-right: none;
       width: 100%;
diff --git a/src/authz-module/role-assignation-wizard/AssignRoleWizard.tsx b/src/authz-module/role-assignation-wizard/AssignRoleWizard.tsx
index bcd1eecf..0b60a570 100644
--- a/src/authz-module/role-assignation-wizard/AssignRoleWizard.tsx
+++ b/src/authz-module/role-assignation-wizard/AssignRoleWizard.tsx
@@ -158,7 +158,7 @@ const AssignRoleWizard = ({
     <Stepper activeKey={activeStep}>
       <Stepper.Header className="bg-info-100" />
 
-      <div className="bg-light-200 p-5">
+      <div className="page-band py-5">
         <Stepper.Step
           eventKey={STEPS.SELECT_USERS_AND_ROLE}
           title={intl.formatMessage(messages['wizard.step.selectUsersAndRole.title'])}
@@ -191,7 +191,7 @@ const AssignRoleWizard = ({
         </Stepper.Step>
       </div>
 
-      <div className="p-5">
+      <div className="page-band py-5">
         <Stepper.ActionRow eventKey={STEPS.SELECT_USERS_AND_ROLE}>
           <Button variant="outline-primary" onClick={handleClose}>
             {intl.formatMessage(messages['wizard.button.cancel'])}
diff --git a/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx b/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx
index f618f103..c2801cef 100644
--- a/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx
+++ b/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx
@@ -39,7 +39,6 @@ const AssignRoleWizardPage = () => {
 
   return (
     <AuthZLayout
-      context={{ id: '', title: '', org: '' }}
       navLinks={[{ label: intl.formatMessage(messages['wizard.page.breadcrumb']), to: returnTo }]}
       activeLabel={intl.formatMessage(messages['wizard.page.title'])}
       pageTitle={intl.formatMessage(messages['wizard.page.title'])}
diff --git a/src/authz-module/roles-permissions/RolesPermissions.tsx b/src/authz-module/roles-permissions/RolesPermissions.tsx
index 676a9f22..0b8edd72 100644
--- a/src/authz-module/roles-permissions/RolesPermissions.tsx
+++ b/src/authz-module/roles-permissions/RolesPermissions.tsx
@@ -51,7 +51,7 @@ const RolesPermissions = () => {
   }, [intl]);
 
   return (
-    <Container className="p-5">
+    <>
       <Container className="pb-5">
         <ButtonGroup size="lg" className="mb-2">
           <Button
@@ -106,7 +106,7 @@ const RolesPermissions = () => {
         />
       )}
       <AnchorButton />
-    </Container>
+    </>
   );
 };
 
diff --git a/src/authz-module/team-members/TeamMembersTable.tsx b/src/authz-module/team-members/TeamMembersTable.tsx
index 6f6d73c6..b4b30a36 100644
--- a/src/authz-module/team-members/TeamMembersTable.tsx
+++ b/src/authz-module/team-members/TeamMembersTable.tsx
@@ -78,81 +78,79 @@ const TeamMembersTable = ({ presetScope }: TeamMembersTableProps) => {
   useEffect(() => () => fetchData.cancel(), [fetchData]);
 
   return (
-    <div className="authz-module">
-      <DataTable
-        isFilterable
-        isPaginated
-        isSortable
-        manualFilters
-        manualPagination
-        manualSortBy
-        numBreakoutFilters={4}
-        fetchData={fetchData}
-        data={roleAssignments}
-        itemCount={count}
-        pageCount={pageCount}
-        initialState={{ pageSize: TABLE_DEFAULT_PAGE_SIZE, filters: initialFilters }}
-        isLoading={isLoadingAllRoleAssignments}
-        additionalColumns={[
+    <DataTable
+      isFilterable
+      isPaginated
+      isSortable
+      manualFilters
+      manualPagination
+      manualSortBy
+      numBreakoutFilters={4}
+      fetchData={fetchData}
+      data={roleAssignments}
+      itemCount={count}
+      pageCount={pageCount}
+      initialState={{ pageSize: TABLE_DEFAULT_PAGE_SIZE, filters: initialFilters }}
+      isLoading={isLoadingAllRoleAssignments}
+      additionalColumns={[
+        {
+          id: 'action',
+          Header: intl.formatMessage(messages['authz.team.members.table.column.actions.title']),
+          Cell: viewActionCell,
+        },
+      ]}
+      columns={
+        [
           {
-            id: 'action',
-            Header: intl.formatMessage(messages['authz.team.members.table.column.actions.title']),
-            Cell: viewActionCell,
+            id: 'username',
+            Header: intl.formatMessage(messages['authz.team.members.table.column.name.title']),
+            accessor: 'username',
+            Cell: NameCell,
+            filter: 'text',
+            Filter: TextFilter,
+            filterOrder: 1,
           },
-        ]}
-        columns={
-          [
-            {
-              id: 'username',
-              Header: intl.formatMessage(messages['authz.team.members.table.column.name.title']),
-              accessor: 'username',
-              Cell: NameCell,
-              filter: 'text',
-              Filter: TextFilter,
-              filterOrder: 1,
-            },
-            {
-              Header: intl.formatMessage(messages['authz.team.members.table.column.email.title']),
-              accessor: 'email',
-              disableFilters: true,
-              filter: 'text',
-              Filter: TextFilter,
-            },
-            {
-              Header: getCellHeader('org', intl.formatMessage(messages['authz.team.members.table.column.organization.title']), columnsWithFiltersApplied),
-              accessor: 'org',
-              Cell: OrgCell,
-              filter: 'includesValue',
-              Filter: OrgFilter,
-              filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.organization.title']),
-              filterOrder: 2,
-            },
-            {
-              Header: getCellHeader('scope', intl.formatMessage(messages['authz.team.members.table.column.scope.title']), columnsWithFiltersApplied),
-              accessor: 'scope',
-              Cell: ScopeCell,
-              filter: 'includesValue',
-              Filter: ScopesFilter,
-              filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.scope.title']),
-              filterOrder: 4,
-            },
-            {
-              Header: getCellHeader('role', intl.formatMessage(messages['authz.team.members.table.column.role.title']), columnsWithFiltersApplied),
-              accessor: 'role',
-              filter: 'includesValue',
-              Cell: RoleCell,
-              Filter: RolesFilter,
-              filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.role.title']),
-              filterOrder: 3,
-            },
-          ]
-        }
-      >
-        <TableControlBar onFilterChange={setColumnsWithFiltersApplied} />
-        <DataTable.Table />
-        <TableFooter />
-      </DataTable>
-    </div>
+          {
+            Header: intl.formatMessage(messages['authz.team.members.table.column.email.title']),
+            accessor: 'email',
+            disableFilters: true,
+            filter: 'text',
+            Filter: TextFilter,
+          },
+          {
+            Header: getCellHeader('org', intl.formatMessage(messages['authz.team.members.table.column.organization.title']), columnsWithFiltersApplied),
+            accessor: 'org',
+            Cell: OrgCell,
+            filter: 'includesValue',
+            Filter: OrgFilter,
+            filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.organization.title']),
+            filterOrder: 2,
+          },
+          {
+            Header: getCellHeader('scope', intl.formatMessage(messages['authz.team.members.table.column.scope.title']), columnsWithFiltersApplied),
+            accessor: 'scope',
+            Cell: ScopeCell,
+            filter: 'includesValue',
+            Filter: ScopesFilter,
+            filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.scope.title']),
+            filterOrder: 4,
+          },
+          {
+            Header: getCellHeader('role', intl.formatMessage(messages['authz.team.members.table.column.role.title']), columnsWithFiltersApplied),
+            accessor: 'role',
+            filter: 'includesValue',
+            Cell: RoleCell,
+            Filter: RolesFilter,
+            filterButtonText: intl.formatMessage(messages['authz.team.members.table.column.role.title']),
+            filterOrder: 3,
+          },
+        ]
+      }
+    >
+      <TableControlBar onFilterChange={setColumnsWithFiltersApplied} />
+      <DataTable.Table />
+      <TableFooter />
+    </DataTable>
   );
 };
 
diff --git a/src/style.scss b/src/style.scss
index a87e0997..655ca959 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,5 +1,22 @@
-// App-scoped runtime styles for the toast manager. Global selectors, so
-// they must not live under any component's scoped stylesheet.
+// App-scoped global styles. Global selectors, so they must not live under any
+// component's scoped stylesheet.
+
+// Insets content to line up with the site header (`Container fluid size="xl"`) while the
+// element stays full width, so a background it carries still bleeds to the edges. Must
+// span the viewport: `100%` resolves against its own containing block, so nested in a
+// constrained box the overhang silently goes to zero. Pair with `py-*`, not `p-*`, and
+// not on a Paragon `Container` -- its gutter ties on specificity and wins on order.
+.page-band {
+  --page-band-overhang: max(
+    0px,
+    (100% - var(--pgn-size-container-max-width-xl) - var(--pgn-spacing-grid-gutter-width)) / 2
+  );
+
+  padding-left: calc(var(--page-band-overhang) + var(--pgn-spacing-spacer-5));
+  padding-right: calc(var(--page-band-overhang) + var(--pgn-spacing-spacer-5));
+}
+
+// Runtime styles for the toast manager.
 .toast-container {
   // Ensure toast appears above modal
   z-index: 1000;

From 93dd152cfacc357edbd86fff4cec058db78eb210 Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Tue, 22 Sep 2026 19:04:24 +1000
Subject: [PATCH 2/7] fix: allow roles and permisssions scrolling for small
 screens

---
 src/authz-module/components/PermissionTable.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/authz-module/components/PermissionTable.tsx b/src/authz-module/components/PermissionTable.tsx
index e2e7f619..3d2f8256 100644
--- a/src/authz-module/components/PermissionTable.tsx
+++ b/src/authz-module/components/PermissionTable.tsx
@@ -18,7 +18,9 @@ interface PermissionTableProps {
 const PermissionTable = ({ permissionsTable, roles, title }: PermissionTableProps) => {
   const { formatMessage } = useIntl();
   return (
-    <Card>
+    // The matrix is wider than a narrow viewport once it has a few role columns, so the
+    // card scrolls rather than letting the table overflow with no way to reach it.
+    <Card className="overflow-auto">
       <table className="permission-table w-100">
         <thead>
           <tr>

From 4cc7fb3a899cb81b39f760a87c3b663e1362d2f0 Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Tue, 22 Sep 2026 20:55:52 +1000
Subject: [PATCH 3/7] fix: filter wrap for small screens

---
 src/authz-module/index.scss                   |  3 ---
 .../components/ScopeFilterBar.tsx             | 22 +++++++++----------
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/authz-module/index.scss b/src/authz-module/index.scss
index 394ebe94..0e39436c 100644
--- a/src/authz-module/index.scss
+++ b/src/authz-module/index.scss
@@ -122,6 +122,3 @@
   max-height: 500px;
 }
 
-.scope-search-input {
-  width: 18.75rem; // 300px
-}
diff --git a/src/authz-module/role-assignation-wizard/components/ScopeFilterBar.tsx b/src/authz-module/role-assignation-wizard/components/ScopeFilterBar.tsx
index 1a0b41c0..64a989a9 100644
--- a/src/authz-module/role-assignation-wizard/components/ScopeFilterBar.tsx
+++ b/src/authz-module/role-assignation-wizard/components/ScopeFilterBar.tsx
@@ -33,18 +33,16 @@ const ScopeFilterBar = ({
   return (
     <>
       <div className="d-flex align-items-center justify-content-between gap-3 mb-2 flex-wrap">
-        <div className="d-flex align-items-center gap-3">
-          <div className="scope-search-input">
-            <Form.Group controlId="scope-search" className="mb-0">
-              <Form.Control
-                type="text"
-                value={search}
-                onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
-                placeholder={intl.formatMessage(messages['wizard.step2.search.placeholder'])}
-                trailingElement={<Icon src={Search} />}
-              />
-            </Form.Group>
-          </div>
+        <div className="d-flex align-items-center gap-3 flex-wrap">
+          <Form.Group controlId="scope-search" className="mb-0">
+            <Form.Control
+              type="text"
+              value={search}
+              onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
+              placeholder={intl.formatMessage(messages['wizard.step2.search.placeholder'])}
+              trailingElement={<Icon src={Search} />}
+            />
+          </Form.Group>
 
           <OrgFilter
             filterButtonText={intl.formatMessage(messages['wizard.step2.filter.org.label'])}

From d99430cf11f785ae9b07d30a44272f3a20386159 Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Tue, 22 Sep 2026 21:14:46 +1000
Subject: [PATCH 4/7] fix: make pageSubtitle optional

---
 src/authz-module/authz-home/index.tsx                         | 1 -
 src/authz-module/components/AuthZTitle.test.tsx               | 2 --
 src/authz-module/components/AuthZTitle.tsx                    | 4 ++--
 .../role-assignation-wizard/AssignRoleWizardPage.tsx          | 1 -
 4 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/authz-module/authz-home/index.tsx b/src/authz-module/authz-home/index.tsx
index 1c0702dc..15250122 100644
--- a/src/authz-module/authz-home/index.tsx
+++ b/src/authz-module/authz-home/index.tsx
@@ -23,7 +23,6 @@ const AuthzHome = () => {
   return (
     <AuthZLayout
       pageTitle={pageTitle}
-      pageSubtitle=""
       actions={
         [<AddRoleButton key="add-role-button" />]
       }
diff --git a/src/authz-module/components/AuthZTitle.test.tsx b/src/authz-module/components/AuthZTitle.test.tsx
index 6b76f709..a9676830 100644
--- a/src/authz-module/components/AuthZTitle.test.tsx
+++ b/src/authz-module/components/AuthZTitle.test.tsx
@@ -12,14 +12,12 @@ describe('AuthZTitle', () => {
   const defaultProps = {
     activeLabel: 'Current Page',
     pageTitle: 'Page Title',
-    pageSubtitle: 'Page Subtitle',
   };
 
   it('renders without optional fields', () => {
     render(<AuthZTitle {...defaultProps} />);
     expect(screen.getByText(defaultProps.activeLabel)).toBeInTheDocument();
     expect(screen.getByText(defaultProps.pageTitle)).toBeInTheDocument();
-    expect(screen.getByText(defaultProps.pageSubtitle as string)).toBeInTheDocument();
   });
 
   it('renders breadcrumb with links and active label', () => {
diff --git a/src/authz-module/components/AuthZTitle.tsx b/src/authz-module/components/AuthZTitle.tsx
index a204453c..42ba24f4 100644
--- a/src/authz-module/components/AuthZTitle.tsx
+++ b/src/authz-module/components/AuthZTitle.tsx
@@ -23,7 +23,7 @@ interface Action {
 export interface AuthZTitleProps {
   activeLabel?: string;
   pageTitle: string;
-  pageSubtitle: string | ReactNode;
+  pageSubtitle?: string | ReactNode;
   navLinks?: BreadcrumbLink[];
   actions?: (Action | ReactNode)[];
 }
@@ -38,7 +38,7 @@ export const ActionButton = ({ label, icon, onClick }: Action) => (
 );
 
 const AuthZTitle = ({
-  activeLabel, navLinks = [], pageTitle, pageSubtitle, actions = [],
+  activeLabel, navLinks = [], pageTitle, pageSubtitle = '', actions = [],
 }: AuthZTitleProps) => {
   const isDesktop = useMediaQuery({ minWidth: breakpoints.large.minWidth });
   return (
diff --git a/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx b/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx
index c2801cef..d99659f1 100644
--- a/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx
+++ b/src/authz-module/role-assignation-wizard/AssignRoleWizardPage.tsx
@@ -42,7 +42,6 @@ const AssignRoleWizardPage = () => {
       navLinks={[{ label: intl.formatMessage(messages['wizard.page.breadcrumb']), to: returnTo }]}
       activeLabel={intl.formatMessage(messages['wizard.page.title'])}
       pageTitle={intl.formatMessage(messages['wizard.page.title'])}
-      pageSubtitle=""
       actions={[]}
     >
       <AssignRoleWizard

From b806fd00fc4538327e369fb464d56db0140a47ca Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Tue, 22 Sep 2026 22:04:47 +1000
Subject: [PATCH 5/7] refactor: improve alert in small screens

---
 src/authz-module/roles-permissions/RolesPermissions.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/authz-module/roles-permissions/RolesPermissions.tsx b/src/authz-module/roles-permissions/RolesPermissions.tsx
index 0b8edd72..474ae3cf 100644
--- a/src/authz-module/roles-permissions/RolesPermissions.tsx
+++ b/src/authz-module/roles-permissions/RolesPermissions.tsx
@@ -80,15 +80,15 @@ const RolesPermissions = () => {
             variant="info"
             className="mt-5"
           >
-            <div className="row align-items-center">
-              <div className="col col-7">
+            <div className="row align-items-center flex-wrap">
+              <div className="col col-md-7">
                 <p className="text-primary font-weight-bold h4">{intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.title'])}</p>
                 <span>
                   <span className="font-weight-bold">{intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.note'])}</span>
                   {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.description'])}
                 </span>
               </div>
-              <div className="col col-5">
+              <div className="col col-md-5 mt-3 mt-md-0">
                 <Hyperlink className="d-block text-right h5 font-weight-normal" destination="https://docs.openedx.org/en/latest/educators/references/course_development/course_team_roles.html" target="_blank" showLaunchIcon={false} isInline>
                   {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.link'])}
                 </Hyperlink>

From 64fbf37236bff7f1620994ee4d2832f7288ba120 Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Wed, 23 Sep 2026 10:38:43 +1000
Subject: [PATCH 6/7] refactor: apply feedback

---
 src/authz-module/components/AuthZTitle.tsx          | 13 +++++++++----
 .../roles-permissions/RolesPermissions.tsx          |  6 +++---
 src/style.scss                                      | 10 +++++-----
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/src/authz-module/components/AuthZTitle.tsx b/src/authz-module/components/AuthZTitle.tsx
index 42ba24f4..e69fd876 100644
--- a/src/authz-module/components/AuthZTitle.tsx
+++ b/src/authz-module/components/AuthZTitle.tsx
@@ -38,7 +38,7 @@ export const ActionButton = ({ label, icon, onClick }: Action) => (
 );
 
 const AuthZTitle = ({
-  activeLabel, navLinks = [], pageTitle, pageSubtitle = '', actions = [],
+  activeLabel, navLinks = [], pageTitle, pageSubtitle, actions = [],
 }: AuthZTitleProps) => {
   const isDesktop = useMediaQuery({ minWidth: breakpoints.large.minWidth });
   return (
@@ -52,9 +52,14 @@ const AuthZTitle = ({
         <Col xs={12} md={7} className="mb-4">
           <div className="d-flex align-items-center flex-column-sm">
             <h2 className="text-primary mb-0">{pageTitle}</h2>
-            {typeof pageSubtitle === 'string'
-              ? <> { pageSubtitle !== '' && <hr className="authz-action-divider mx-lg-3" /> }<h3 className="mb-0 py-2 font-weight-light text-gray-700">{pageSubtitle}</h3></>
-              : <>{ pageSubtitle !== '' && <hr className="authz-action-divider mx-lg-3" /> } <div className="mb-0">{pageSubtitle}</div></>}
+            {pageSubtitle && (
+              <>
+                <hr className="authz-action-divider mx-lg-3" />
+                {typeof pageSubtitle === 'string'
+                  ? <h3 className="mb-0 py-2 font-weight-light text-gray-700">{pageSubtitle}</h3>
+                  : <div className="mb-0">{pageSubtitle}</div>}
+              </>
+            )}
 
           </div>
         </Col>
diff --git a/src/authz-module/roles-permissions/RolesPermissions.tsx b/src/authz-module/roles-permissions/RolesPermissions.tsx
index 474ae3cf..e72a373d 100644
--- a/src/authz-module/roles-permissions/RolesPermissions.tsx
+++ b/src/authz-module/roles-permissions/RolesPermissions.tsx
@@ -80,15 +80,15 @@ const RolesPermissions = () => {
             variant="info"
             className="mt-5"
           >
-            <div className="row align-items-center flex-wrap">
-              <div className="col col-md-7">
+            <div className="row align-items-center">
+              <div className="col-12 col-md-7">
                 <p className="text-primary font-weight-bold h4">{intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.title'])}</p>
                 <span>
                   <span className="font-weight-bold">{intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.note'])}</span>
                   {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.description'])}
                 </span>
               </div>
-              <div className="col col-md-5 mt-3 mt-md-0">
+              <div className="col-12 col-md-5 mt-3 mt-md-0">
                 <Hyperlink className="d-block text-right h5 font-weight-normal" destination="https://docs.openedx.org/en/latest/educators/references/course_development/course_team_roles.html" target="_blank" showLaunchIcon={false} isInline>
                   {intl.formatMessage(messages['authz.tabs.permissionsRoles.courses.alert.link'])}
                 </Hyperlink>
diff --git a/src/style.scss b/src/style.scss
index 655ca959..9fc58550 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -1,11 +1,11 @@
 // App-scoped global styles. Global selectors, so they must not live under any
 // component's scoped stylesheet.
 
-// Insets content to line up with the site header (`Container fluid size="xl"`) while the
-// element stays full width, so a background it carries still bleeds to the edges. Must
-// span the viewport: `100%` resolves against its own containing block, so nested in a
-// constrained box the overhang silently goes to zero. Pair with `py-*`, not `p-*`, and
-// not on a Paragon `Container` -- its gutter ties on specificity and wins on order.
+// Lines content up with the site header (`Container fluid size="xl"`) while the element
+// itself stays full width, so a background it carries still bleeds to the edges.
+// The overhang is measured from the element's own width, so it has to span the viewport:
+// inside a constrained box it collapses to zero. Use `py-*` for vertical padding; `p-*`
+// sets the `padding` shorthand `!important`, which wipes out the horizontal inset.
 .page-band {
   --page-band-overhang: max(
     0px,

From 4d04747567902d1b84b1b04552a07765b24535d6 Mon Sep 17 00:00:00 2001
From: Diana Olarte <diana.olarte@edunext.co>
Date: Wed, 23 Sep 2026 13:22:43 +1000
Subject: [PATCH 7/7] fix: scrall permissions table only in small screens

---
 src/authz-module/components/PermissionTable.tsx |  7 ++++---
 src/authz-module/index.scss                     | 11 +++++++++++
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/authz-module/components/PermissionTable.tsx b/src/authz-module/components/PermissionTable.tsx
index 3d2f8256..4f1bb859 100644
--- a/src/authz-module/components/PermissionTable.tsx
+++ b/src/authz-module/components/PermissionTable.tsx
@@ -18,9 +18,10 @@ interface PermissionTableProps {
 const PermissionTable = ({ permissionsTable, roles, title }: PermissionTableProps) => {
   const { formatMessage } = useIntl();
   return (
-    // The matrix is wider than a narrow viewport once it has a few role columns, so the
-    // card scrolls rather than letting the table overflow with no way to reach it.
-    <Card className="overflow-auto">
+    // Only the narrowest viewports are too small for the matrix, so the card scrolls there
+    // (see `.permission-table-scroll`). Above that it is not a scroll container, which is
+    // what lets the header row stick to the viewport as the page scrolls.
+    <Card className="permission-table-scroll">
       <table className="permission-table w-100">
         <thead>
           <tr>
diff --git a/src/authz-module/index.scss b/src/authz-module/index.scss
index 0e39436c..856af828 100644
--- a/src/authz-module/index.scss
+++ b/src/authz-module/index.scss
@@ -62,6 +62,17 @@
       line-height: 24px;
     }
   }
+
+  // Paragon's `.overflow-auto` lives in the `paragon` cascade layer, where its `!important`
+  // outranks anything this layer can say, so the card carries its own class instead. The
+  // matrix is 432px at min-content: only the narrowest screens need the card to scroll, and
+  // the cap is what gives the sticky header something to stick to while it is the scroller.
+  @media (--pgn-size-breakpoint-max-width-xs) {
+    .permission-table-scroll {
+      overflow: auto;
+      max-height: 80vh;
+    }
+  }
   
   @media(--pgn-size-breakpoint-max-width-sm){
     .flex-column-sm {