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:
@@ -70,9 +70,16 @@ export default function Layout() {
|
|||||||
// weil sein Scroll-Ancestor der Wrapper war – der aber wegen der
|
// weil sein Scroll-Ancestor der Wrapper war – der aber wegen der
|
||||||
// Flexbox-`min-h-auto`-Regel nicht selbst scrollte. Jetzt scrollt
|
// Flexbox-`min-h-auto`-Regel nicht selbst scrollte. Jetzt scrollt
|
||||||
// wieder das Window, und Sticky sitzt an der Viewport-Kante.
|
// 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">
|
<div className="flex min-h-screen">
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
<div className="flex-1 flex flex-col">
|
<div className="flex-1 flex flex-col min-w-0">
|
||||||
<ConsentBanner />
|
<ConsentBanner />
|
||||||
<main className="flex-1 p-8">
|
<main className="flex-1 p-8">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
|||||||
Reference in New Issue
Block a user