fix(shell): Einklapp-Knopf wurde von der Inhaltsspalte überdeckt
Der Knopf ragt bauartbedingt 17 px aus der Seitenleiste in die Inhaltsfläche hinein. Dort wurde seine rechte Hälfte verdeckt — er sah abgeschnitten aus und war auf diesem Teil nicht anklickbar. Nicht abgeschnitten, sondern überdeckt: Gemessen war overflow überall visible, aber das oberste Element an der Knopfmitte war die Inhaltsspalte. Ursache ist ein Stapelkontext — 'position: sticky' erzeugt einen eigenen, wodurch das z-index:40 des Knopfes darin gefangen bleibt. Der Rahmen selbst hatte z-index:auto, also malte die später im Dokument stehende Inhaltsspalte darüber. Behoben mit z-50 am Sidebar-Rahmen; die Software setzt an derselben Stelle ebenfalls z-50. Nachgemessen: Am rechten Rand ist jetzt der Knopf selbst das oberste Element, und ein Klick genau dort schaltet um. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
This commit is contained in:
1 parent
7183fad27a
commit
9eec855f57
1 file changed
+6
-1
@@ -61,7 +61,12 @@ export function AppShell({ children }: { children: React.ReactNode }) {
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen w-full bg-neutral-50">
|
||||
<div className="dv-no-print sticky top-0 h-screen flex-none">
|
||||
{/* z-50 ist nötig, nicht dekorativ: `position: sticky` erzeugt einen
|
||||
eigenen Stapelkontext. Ohne z-Wert am Rahmen bleibt das z-index des
|
||||
Einklapp-Knopfes darin gefangen, und die Inhaltsspalte — ein späteres
|
||||
Geschwisterelement — malt über den Teil, der aus der Leiste
|
||||
herausragt. Die Software setzt an derselben Stelle ebenfalls z-50. */}
|
||||
<div className="dv-no-print sticky top-0 z-50 h-screen flex-none">
|
||||
<SidebarWithSections
|
||||
variant={eingeklappt ? "closed" : "open"}
|
||||
onToggleCollapse={() => setEingeklappt((wert) => !wert)}
|
||||
|
||||
Reference in new issue
Block a user