fix(ui): prevent modal overlays from inheriting margin-top from parent space-y containers
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 57s

This commit is contained in:
sandrodach committed 2026-10-25 21:20:57 +01:00
1 parent 212cb32bb0
commit 8b043c4809
10 files changed
+24 -13

No files matched your search

+3 -3
View File
@@ -1018,7 +1018,7 @@ export const App: React.FC = () => {
{/* MOBILE QUICK-ADD BOTTOM SHEET / MODAL */} {/* MOBILE QUICK-ADD BOTTOM SHEET / MODAL */}
{showMobileCapture && ( {showMobileCapture && (
<div <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)} onClick={() => setShowMobileCapture(false)}
> >
<div <div
@@ -1060,7 +1060,7 @@ export const App: React.FC = () => {
{/* MOBILE USER PROFILE SHEET */} {/* MOBILE USER PROFILE SHEET */}
{showMobileProfile && ( {showMobileProfile && (
<div <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)} onClick={() => setShowMobileProfile(false)}
> >
<div <div
@@ -1219,7 +1219,7 @@ export const App: React.FC = () => {
{/* IMMEDIATE MOBILE WEB-APP INSTALLATION OFFER SHEET */} {/* IMMEDIATE MOBILE WEB-APP INSTALLATION OFFER SHEET */}
{showPwaInstallModal && !isStandaloneApp && ( {showPwaInstallModal && !isStandaloneApp && (
<div <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} onClick={handleDismissPwaModal}
> >
<div <div
+2 -2
View File
@@ -13,10 +13,10 @@ export const MobileHeaderMenu: React.FC<MobileHeaderMenuProps> = ({ activeTabLab
if (!isMenuOpen) return null; if (!isMenuOpen) return null;
return ( return (
<div className="sm:hidden fixed inset-0 z-50"> <div className="sm:hidden fixed inset-0 !m-0 z-50">
{/* Backdrop */} {/* Backdrop */}
<div <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={() => { onClick={() => {
triggerHaptic(8); triggerHaptic(8);
closeMenu(); closeMenu();
@@ -96,7 +96,7 @@ export const UnifiedShareModal: React.FC<UnifiedShareModalProps> = ({
return ( return (
<div <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) => { onClick={(e) => {
if (e.target === e.currentTarget) onClose(); if (e.target === e.currentTarget) onClose();
}} }}
+1 -1
View File
@@ -252,7 +252,7 @@ export const GroupsView: React.FC<GroupsViewProps> = ({ currentUser, onBack }) =
{/* Modal: Neue Gruppe erstellen */} {/* Modal: Neue Gruppe erstellen */}
{showCreateModal && ( {showCreateModal && (
<div <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)} onClick={() => setShowCreateModal(false)}
> >
<div <div
@@ -125,7 +125,7 @@ export const ManageColumnsModal: React.FC<ManageColumnsModalProps> = ({
}; };
return ( 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 <div
className="w-full max-w-md panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[90vh] overflow-hidden" 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()} onClick={(e) => e.stopPropagation()}
@@ -163,7 +163,7 @@ export const TaskDetailModal: React.FC<TaskDetailModalProps> = ({
const subtasksPercent = subtasks.length > 0 ? Math.round((completedSubtasks / subtasks.length) * 100) : 0; const subtasksPercent = subtasks.length > 0 ? Math.round((completedSubtasks / subtasks.length) * 100) : 0;
return ( 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 <div
className="w-full max-w-2xl panel-surface shadow-panel border border-border my-auto flex flex-col max-h-[92vh] overflow-hidden" 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()} onClick={(e) => e.stopPropagation()}
+1 -1
View File
@@ -1488,7 +1488,7 @@ export const TasksView: React.FC<TasksViewProps> = ({
{/* NEW LIST MODAL */} {/* NEW LIST MODAL */}
{showNewListModal && ( {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="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"> <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"> <h3 className="text-sm font-semibold text-main flex items-center gap-1.5">
+1 -1
View File
@@ -811,7 +811,7 @@ export const TriageDeck: React.FC<TriageDeckProps> = ({
{/* LONG-PRESS / MORE OPTIONS ACTION SHEET (For Triage Card & Queue Items) */} {/* LONG-PRESS / MORE OPTIONS ACTION SHEET (For Triage Card & Queue Items) */}
{actionSheetCard && ( {actionSheetCard && (
<div <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)} onClick={() => setActionSheetCard(null)}
> >
<div <div
@@ -3194,7 +3194,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* Mobile Backdrop for File Tree Slide-Over Drawer */} {/* Mobile Backdrop for File Tree Slide-Over Drawer */}
{showMobileFileDrawer && ( {showMobileFileDrawer && (
<div <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)} onClick={() => setShowMobileFileDrawer(false)}
/> />
)} )}
@@ -4820,7 +4820,7 @@ export const WorkspaceView: React.FC<WorkspaceViewProps> = ({
{/* LINK INSERTION MODAL (/link, /notiz, /web) */} {/* LINK INSERTION MODAL (/link, /notiz, /web) */}
{linkModalBlockId && ( {linkModalBlockId && (
<div <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={() => { onClick={() => {
const blockId = linkModalBlockId; const blockId = linkModalBlockId;
const wasEditingLink = Boolean(editingLinkOriginalRaw); const wasEditingLink = Boolean(editingLinkOriginalRaw);
+11
View File
@@ -348,10 +348,21 @@ body {
/* Modal-Hintergrund-Overlay */ /* Modal-Hintergrund-Overlay */
.modal-overlay { .modal-overlay {
margin: 0 !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background-color: var(--bg-overlay); background-color: var(--bg-overlay);
backdrop-filter: blur(4px); 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 */ /* File Tree Item */
.tree-node-active { .tree-node-active {
background-color: var(--bg-panel-elevated); background-color: var(--bg-panel-elevated);