Layout: min-w-0 auf Content-Wrapper, sonst horizontales Overflow

Flexbox-Items haben default min-width: auto. Ohne overflow-auto
(das ich in 6479598 rausgenommen habe, damit Sticky-Header
funktionieren) wächst der Wrapper mit jedem breiten Kind – lange
E-Mail-Adressen, breite Tabellen, PDF-URL-Anhänge – horizontal
über die Viewport-Breite hinaus.

min-w-0 cappt die Flex-Basis auf die verfügbare Breite, ohne
einen Scroll-Kontext zu schaffen (im Gegensatz zu overflow-auto),
also bleiben die Sticky-Header weiter wirksam.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-07-03 08:35:00 +02:00
parent 647959837a
commit 9c5c22d92b
+8 -1
View File
@@ -70,9 +70,16 @@ export default function Layout() {
// weil sein Scroll-Ancestor der Wrapper war der aber wegen der
// Flexbox-`min-h-auto`-Regel nicht selbst scrollte. Jetzt scrollt
// wieder das Window, und Sticky sitzt an der Viewport-Kante.
//
// `min-w-0` auf dem Content-Wrapper: Flex-Items haben default
// `min-width: auto`, wodurch der Wrapper von einem sehr breiten
// Kind (lange E-Mail-Adressen, breite Tabellen, PDF-URL-Anhänge)
// horizontal aufgebläht wird. Ohne overflow-auto fehlte der
// stille Cap; jetzt cappt min-w-0 die Flex-Basis auf die
// Viewport-Breite.
<div className="flex min-h-screen">
<Sidebar />
<div className="flex-1 flex flex-col">
<div className="flex-1 flex flex-col min-w-0">
<ConsentBanner />
<main className="flex-1 p-8">
<Outlet />