fix: fix the header

Use a roles array in the dashboard route so that header slot widgets
scope correctly to the dashboard role, and set the Courses link URL
accordingly.

Also wrap MasqueradeBar in a Paragon Container so its content aligns
with the header and main content areas.

Co-Authored-By: Claude <noreply@anthropic.com>

Author: arbrandes

package-lock.json

@@ -1,4 +1,4 @@
-import { authenticatedLoader } from '@openedx/frontend-base';
+import { authenticatedLoader, homeRole } from '@openedx/frontend-base';
 import { dashboardRole } from './constants';
 
 const routes = [
@@ -7,7 +7,7 @@ const routes = [
     path: '/learner-dashboard',
     loader: authenticatedLoader,
     handle: {
-      role: dashboardRole
+      roles: [dashboardRole, homeRole]
     },
     async lazy () {
       const module = await import('./Main');

src/routes.jsx

@@ -3,6 +3,7 @@ import { SiteContext } from '@openedx/frontend-base';
 
 import {
   Chip,
+  Container,
   Form,
   FormControl,
   FormControlFeedback,
@@ -36,8 +37,9 @@ export const MasqueradeBar = () => {
   if (!canMasquerade) { return null; }
 
   return (
-    <div className="w-100 shadow-sm px-2">
-      <Form className="masquerade-bar w-100">
+    <div className="w-100 shadow-sm">
+      <Container fluid size="xl">
+        <Form className="masquerade-bar w-100">
         {isMasquerading ? (
           <>
             <FormLabel inline="true" className="masquerade-form-label">
@@ -85,6 +87,7 @@ export const MasqueradeBar = () => {
           </>
         )}
       </Form>
+      </Container>
     </div>
   );
 };

src/widgets/LearnerDashboardHeader/MasqueradeBar/index.jsx

@@ -1,11 +1,11 @@
 .masquerade-bar {
   display: flex;
   align-items: flex-start;
-  padding: var(--pgn-spacing-spacer-3);
+  padding: var(--pgn-spacing-spacer-3) 0;
   margin-bottom: var(--pgn-spacing-spacer-2);
 
   .masquerade-form-label {
-    padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-3);
+    padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-2) 0;
     display: flex;
     align-items: center;
     margin-bottom: 0;
@@ -31,6 +31,6 @@
 @media (--pgn-size-breakpoint-max-width-md) {
   .masquerade-bar {
     margin: auto;
-    padding: var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-4);
+    padding: var(--pgn-spacing-spacer-3) 0;
   }
 }

src/widgets/LearnerDashboardHeader/MasqueradeBar/index.scss

@@ -29,7 +29,7 @@ const app: App = {
       element: (
         <LinkMenuItem
           label={<CoursesLink />}
-          url="/"
+          role={dashboardRole}
           variant="navLink"
         />
       ),