From 29c7273f4d42aba5ecceeb130b4a0c35fc97bca6 Mon Sep 17 00:00:00 2001
From: Kundencenter <kundencenter@localhost>
Date: Thu, 1 Oct 2026 11:18:52 +0200
Subject: [PATCH] fix(web): Impersonation-Banner als volle Kopfzeile statt in
 der Sidebar-Spalte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der Banner stand als erstes Kind in .shell (CSS-Grid mit Sidebar-Spalte +
Inhaltsspalte) und wurde dadurch selbst zur ersten Spalte gerechnet -
schob sich links neben den Rest und verschob das ganze Layout. Jetzt
außerhalb von .shell als eigene, volle Kopfzeile vor dem Grid, Text
zentriert.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 apps/web/src/app/(app)/layout.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/app/(app)/layout.tsx b/apps/web/src/app/(app)/layout.tsx
index 8a59b43..dd1eeb5 100644
--- a/apps/web/src/app/(app)/layout.tsx
+++ b/apps/web/src/app/(app)/layout.tsx
@@ -44,13 +44,14 @@ export default function AppLayout({ children }: { children: ReactNode }) {
     </nav>
   );
   const bottomLink = (href: string, label: string) => <Link href={href} aria-current={path === href || path.startsWith(href + '/') ? 'page' : undefined}>{label}</Link>;
-  return (<div className="shell">
+  return (<>
     {me.impersonating && (
-      <div role="status" style={{ position: 'sticky', top: 0, zIndex: 100, background: 'var(--warn)', color: '#1a1200', padding: '8px 16px', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', justifyContent: 'space-between' }}>
+      <div role="status" style={{ position: 'sticky', top: 0, zIndex: 100, width: '100%', background: 'var(--warn)', color: '#1a1200', padding: '8px 16px', display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', justifyContent: 'center', textAlign: 'center' }}>
         <span>👁 Ansicht als Kunde: <strong>{me.impersonating.orgName}</strong> ({me.impersonating.customerNumber}) · Grund: {me.impersonating.reason}</span>
         <button className="btn small" onClick={() => void stopImpersonation()}>Zurück zur Verwaltung</button>
       </div>
     )}
+    <div className="shell">
     <div className="topbar"><strong>Kundencenter</strong><ThemeToggle compact /></div>
     {nav}<main id="main" className="main">{children}</main>
     {!enrollNeeded && <nav className="bottomnav" aria-label="Hauptnavigation (mobil)">
@@ -60,5 +61,6 @@ export default function AppLayout({ children }: { children: ReactNode }) {
       {(me.kind === 'customer' || can('invoices.read')) && bottomLink('/rechnungen', 'Rechnungen')}
       <button type="button" aria-expanded={open} onClick={() => setOpen(!open)}>Mehr</button>
     </nav>}
-  </div>);
+    </div>
+  </>);
 }