Update-Banner: klebt oben fest (sticky), Sticky-Header rasten darunter ein

Der Hinweis "Neue Version verfuegbar" scrollte bisher weg. Jetzt sticky an
der Viewport-Oberkante; das Banner meldet seine gemessene Hoehe als CSS-Var
--app-banner-h, an der sich die Sticky-Header von ContractDetail/ContractForm
ausrichten (top-[var(--app-banner-h,0px)]), damit sie nicht dahinter
verschwinden.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-08-12 12:20:31 +02:00
co-authored by Claude Opus 4.8
parent e1ca56ebfb
commit aff3f7e84a
3 changed files with 37 additions and 5 deletions
@@ -860,7 +860,7 @@ export default function ContractForm() {
{/* Sticky-Header: Zurück-Button + Titel + Kunde-Zeile bleiben beim
Scrollen oben stehen. Layout-Padding wird per -mx-8 px-8
überbrückt, damit der Balken bündig ist. */}
<div className="sticky top-0 z-20 -mx-8 px-8 pt-4 pb-3 mb-6 bg-gray-100 border-b border-gray-200">
<div className="sticky top-[var(--app-banner-h,0px)] z-20 -mx-8 px-8 pt-4 pb-3 mb-6 bg-gray-100 border-b border-gray-200">
<div className="flex items-center gap-4 mb-2">
<Button variant="ghost" size="sm" onClick={() => navigate(back.to, { state: back.state })}>
<ArrowLeft className="w-4 h-4" />