fix(auth): stop the dev "view as" banner hiding under the header and firing on no-op overrides

Two local-dev fixes for the "View as (dev)" role override:

- The banner rendered between the fixed brand header and <Content>, with
  no top offset, so the fixed header painted over it. Move it inside
  <Content> so it inherits the `.cds--header ~ .cds--content` offset.
- The banner fired on ANY stored override, including one equal to the
  role you already hold — e.g. a stale "view as ILCR_SUBMITTER" replayed
  from localStorage for a real submitter, which changes nothing. Show it
  only when the override actually differs from the real role set.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: gpascucci

frontend/src/components/DevRoleBanner.test.tsx

@@ -32,6 +32,21 @@ describe('DevRoleBanner', () => {
     expect(screen.queryByText(/viewing as/)).toBeNull()
   })
 
+  it('renders nothing when the override matches the real role (a no-op override)', () => {
+    render(
+      <AuthContext
+        value={authValue({
+          override: 'ILCR_SUBMITTER',
+          realRoles: ['ILCR_SUBMITTER'],
+          setOverride: () => undefined,
+        })}
+      >
+        <DevRoleBanner />
+      </AuthContext>,
+    )
+    expect(screen.queryByText(/viewing as/)).toBeNull()
+  })
+
   it('renders nothing when devRoleSwitch is absent (deployed builds)', () => {
     render(
       <AuthContext value={authValue(undefined)}>

frontend/src/components/DevRoleBanner.tsx

@@ -9,19 +9,25 @@ import useAuth from '@/context/auth/useAuth'
 export default function DevRoleBanner() {
   const { devRoleSwitch } = useAuth()
 
-  if (!devRoleSwitch?.override) {
+  // Show only when the override actually changes the effective role. An override equal to the role
+  // you already hold (e.g. a stale "view as ILCR_SUBMITTER" replayed for a real submitter) is a
+  // no-op, so warning about it is just noise.
+  const override = devRoleSwitch?.override
+  const realRoles = devRoleSwitch?.realRoles ?? []
+  const isNoOp = realRoles.length === 1 && realRoles[0] === override
+  if (!override || isNoOp) {
     return null
   }
 
-  const realRoles = devRoleSwitch.realRoles.join(' + ') || 'no ILCR role'
+  const realLabel = realRoles.join(' + ') || 'no ILCR role'
   return (
     <InlineNotification
       kind="warning"
       lowContrast
       hideCloseButton
       className="dev-role-banner"
-      title={`Dev override — viewing as ${devRoleSwitch.override}`}
-      subtitle={`Frontend only: the backend still enforces your real role (${realRoles}), so admin APIs may return 403.`}
+      title={`Dev override — viewing as ${override}`}
+      subtitle={`Frontend only: the backend still enforces your real role (${realLabel}), so admin APIs may return 403.`}
     />
   )
 }

frontend/src/components/Layout/index.tsx

@@ -16,8 +16,12 @@ type Props = {
 const Layout: FC<Props> = ({ children }) => (
   <LayoutProvider>
     <HeaderContainer render={() => <LayoutHeader />} />
-    <DevRoleBanner />
-    <Content className="app-content">{children}</Content>
+    {/* Inside Content so it inherits the fixed-header top offset (.cds--header ~ .cds--content);
+        rendered at the top of the flow above the fixed brand header would hide it. */}
+    <Content className="app-content">
+      <DevRoleBanner />
+      {children}
+    </Content>
     <Footer />
   </LayoutProvider>
 )