flessinglabs/kundencenter
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases 1 Packages Wiki Activity Actions

fix(web): Impersonation-Banner als volle Kopfzeile statt in der Sidebar-Spalte

Browse source 
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>
This commit is contained in:
Kundencenter 2026-10-01 11:18:52 +02:00
parent e2a73f4e6d
commit 29c7273f4d
1 changed files with 5 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
apps/web/src/app/(app)/layout.tsx
View file

@ -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>
</>);
}