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
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 57s
This commit is contained in:
1 parent
212cb32bb0
commit
8b043c4809
10 files changed
+24
-13
No files matched your search
@@ -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
|
||||||
|
|||||||
@@ -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();
|
||||||
}}
|
}}
|
||||||
|
|||||||
@@ -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()}
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
@@ -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);
|
||||||
|
|||||||
Reference in new issue
Block a user