From 8b043c48099bbdca45f261cb25763f5bf50c1ca5 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Sun, 25 Oct 2026 21:20:57 +0100
Subject: [PATCH] fix(ui): prevent modal overlays from inheriting margin-top
 from parent space-y containers

---
 frontend/src/App.tsx                                |  6 +++---
 frontend/src/components/MobileHeaderMenu.tsx        |  4 ++--
 frontend/src/components/UnifiedShareModal.tsx       |  2 +-
 frontend/src/features/teams/GroupsView.tsx          |  2 +-
 frontend/src/features/triage/ManageColumnsModal.tsx |  2 +-
 frontend/src/features/triage/TaskDetailModal.tsx    |  2 +-
 frontend/src/features/triage/TasksView.tsx          |  2 +-
 frontend/src/features/triage/TriageDeck.tsx         |  2 +-
 frontend/src/features/workspace/WorkspaceView.tsx   |  4 ++--
 frontend/src/index.css                              | 11 +++++++++++
 10 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b250bac..8192b32 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1018,7 +1018,7 @@ export const App: React.FC = () => {
       {/* MOBILE QUICK-ADD BOTTOM SHEET / MODAL */}
       {showMobileCapture && (
         <div
-          className="sm:hidden fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
+          className="sm:hidden fixed inset-0 !m-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
           onClick={() => setShowMobileCapture(false)}
         >
           <div
@@ -1060,7 +1060,7 @@ export const App: React.FC = () => {
       {/* MOBILE USER PROFILE SHEET */}
       {showMobileProfile && (
         <div
-          className="sm:hidden fixed inset-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
+          className="sm:hidden fixed inset-0 !m-0 z-50 flex items-end justify-center bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
           onClick={() => setShowMobileProfile(false)}
         >
           <div
@@ -1219,7 +1219,7 @@ export const App: React.FC = () => {
       {/* IMMEDIATE MOBILE WEB-APP INSTALLATION OFFER SHEET */}
       {showPwaInstallModal && !isStandaloneApp && (
         <div
-          className="sm:hidden fixed inset-0 z-50 flex items-end justify-center bg-black/65 backdrop-blur-xs animate-in fade-in duration-150"
+          className="sm:hidden fixed inset-0 !m-0 z-50 flex items-end justify-center bg-black/65 backdrop-blur-xs animate-in fade-in duration-150"
           onClick={handleDismissPwaModal}
         >
           <div
diff --git a/frontend/src/components/MobileHeaderMenu.tsx b/frontend/src/components/MobileHeaderMenu.tsx
index c33bf98..f2f3d87 100644
--- a/frontend/src/components/MobileHeaderMenu.tsx
+++ b/frontend/src/components/MobileHeaderMenu.tsx
@@ -13,10 +13,10 @@ export const MobileHeaderMenu: React.FC<MobileHeaderMenuProps> = ({ activeTabLab
   if (!isMenuOpen) return null;
 
   return (
-    <div className="sm:hidden fixed inset-0 z-50">
+    <div className="sm:hidden fixed inset-0 !m-0 z-50">
       {/* Backdrop */}
       <div
-        className="fixed inset-0 bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
+        className="fixed inset-0 !m-0 bg-black/60 backdrop-blur-xs animate-in fade-in duration-150"
         onClick={() => {
           triggerHaptic(8);
           closeMenu();
diff --git a/frontend/src/components/UnifiedShareModal.tsx b/frontend/src/components/UnifiedShareModal.tsx
index 3671ae3..d4e290e 100644
--- a/frontend/src/components/UnifiedShareModal.tsx
+++ b/frontend/src/components/UnifiedShareModal.tsx
@@ -96,7 +96,7 @@ export const UnifiedShareModal: React.FC<UnifiedShareModalProps> = ({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs"
+      className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs"
       onClick={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
diff --git a/frontend/src/features/teams/GroupsView.tsx b/frontend/src/features/teams/GroupsView.tsx
index 7273072..7238ad2 100644
--- a/frontend/src/features/teams/GroupsView.tsx
+++ b/frontend/src/features/teams/GroupsView.tsx
@@ -252,7 +252,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ currentUser, onBack }) =
       {/* Modal: Neue Gruppe erstellen */}
       {showCreateModal && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs p-4 animate-in fade-in duration-150"
+          className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs p-4 animate-in fade-in duration-150"
           onClick={() => setShowCreateModal(false)}
         >
           <div
diff --git a/frontend/src/features/triage/ManageColumnsModal.tsx b/frontend/src/features/triage/ManageColumnsModal.tsx
index c437605..a4e0a7c 100644
--- a/frontend/src/features/triage/ManageColumnsModal.tsx
+++ b/frontend/src/features/triage/ManageColumnsModal.tsx
@@ -125,7 +125,7 @@ export const ManageColumnsModal: React.FC<ManageColumnsModalProps> = ({
   };
 
   return (
-    <div className="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4">
+    <div className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4">
       <div
         className="w-full max-w-md panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[90vh] overflow-hidden"
         onClick={(e) => e.stopPropagation()}
diff --git a/frontend/src/features/triage/TaskDetailModal.tsx b/frontend/src/features/triage/TaskDetailModal.tsx
index 58709b8..93f9fd3 100644
--- a/frontend/src/features/triage/TaskDetailModal.tsx
+++ b/frontend/src/features/triage/TaskDetailModal.tsx
@@ -163,7 +163,7 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
   const subtasksPercent = subtasks.length > 0 ? Math.round((completedSubtasks / subtasks.length) * 100) : 0;
 
   return (
-    <div className="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
+    <div className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-3 sm:p-4 overflow-y-auto">
       <div
         className="w-full max-w-2xl panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[92vh] overflow-hidden"
         onClick={(e) => e.stopPropagation()}
diff --git a/frontend/src/features/triage/TasksView.tsx b/frontend/src/features/triage/TasksView.tsx
index df53be1..4d319be 100644
--- a/frontend/src/features/triage/TasksView.tsx
+++ b/frontend/src/features/triage/TasksView.tsx
@@ -1488,7 +1488,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
 
       {/* NEW LIST MODAL */}
       {showNewListModal && (
-        <div className="fixed inset-0 modal-overlay z-50 flex items-center justify-center p-4">
+        <div className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-4">
           <div className="w-full max-w-sm panel-surface shadow-panel p-4 space-y-3">
             <div className="flex items-center justify-between border-b border-border pb-2">
               <h3 className="text-sm font-semibold text-main flex items-center gap-1.5">
diff --git a/frontend/src/features/triage/TriageDeck.tsx b/frontend/src/features/triage/TriageDeck.tsx
index d9b462f..22aa1f4 100644
--- a/frontend/src/features/triage/TriageDeck.tsx
+++ b/frontend/src/features/triage/TriageDeck.tsx
@@ -811,7 +811,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
       {/* LONG-PRESS / MORE OPTIONS ACTION SHEET (For Triage Card & Queue Items) */}
       {actionSheetCard && (
         <div
-          className="fixed inset-0 z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-xs p-0 sm:p-4 animate-in fade-in duration-150"
+          className="fixed inset-0 !m-0 modal-overlay z-50 flex items-end sm:items-center justify-center bg-black/60 backdrop-blur-xs p-0 sm:p-4 animate-in fade-in duration-150"
           onClick={() => setActionSheetCard(null)}
         >
           <div
diff --git a/frontend/src/features/workspace/WorkspaceView.tsx b/frontend/src/features/workspace/WorkspaceView.tsx
index 171ab02..cd6eb30 100644
--- a/frontend/src/features/workspace/WorkspaceView.tsx
+++ b/frontend/src/features/workspace/WorkspaceView.tsx
@@ -3194,7 +3194,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
           {/* Mobile Backdrop for File Tree Slide-Over Drawer */}
           {showMobileFileDrawer && (
             <div
-              className="fixed inset-0 bg-black/50 backdrop-blur-xs z-40 lg:hidden animate-in fade-in duration-150"
+              className="fixed inset-0 !m-0 bg-black/50 backdrop-blur-xs z-40 lg:hidden animate-in fade-in duration-150"
               onClick={() => setShowMobileFileDrawer(false)}
             />
           )}
@@ -4820,7 +4820,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
       {/* LINK INSERTION MODAL (/link, /notiz, /web) */}
       {linkModalBlockId && (
         <div
-          className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs"
+          className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-xs"
           onClick={() => {
             const blockId = linkModalBlockId;
             const wasEditingLink = Boolean(editingLinkOriginalRaw);
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 429f2fc..9b5c1c4 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -348,10 +348,21 @@ body {
 
   /* Modal-Hintergrund-Overlay */
   .modal-overlay {
+    margin: 0 !important;
+    top: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
     background-color: var(--bg-overlay);
     backdrop-filter: blur(4px);
   }
 
+  /* Verhindert, dass Elterncontainer mit space-y-* oder space-x-* feste Overlays nach unten verschieben */
+  .fixed.inset-0,
+  [class*="fixed inset-0"] {
+    margin: 0 !important;
+  }
+
   /* File Tree Item */
   .tree-node-active {
     background-color: var(--bg-panel-elevated);