diff --git a/assets/stylesheets/App.css b/assets/stylesheets/App.css index 43452994..cacabb2e 100644 --- a/assets/stylesheets/App.css +++ b/assets/stylesheets/App.css @@ -4015,6 +4015,7 @@ body.objectKanbanColumnResizing * { .dashboard-tab-panes { position: relative; + isolation: isolate; flex: 1 1 auto; min-height: 0; height: 100%; @@ -4035,23 +4036,30 @@ body.objectKanbanColumnResizing * { } .dashboard-tab-pane-active { - z-index: 1; - pointer-events: auto; + z-index: 2; + isolation: isolate; + display: flex; + visibility: visible; + opacity: 1; transform: none; } .dashboard-tab-pane-inactive { z-index: 0; overflow: hidden; - pointer-events: none; + display: none; visibility: hidden; - transform: translate(-100%, 0); + opacity: 0; } .dashboard-tab-pane-inactive.dashboard-tab-pane-capturing { - /* Stay translated off-screen so capture cannot cover the active tab. - Layout size stays 100% of the host for SnapDOM. */ + /* Preview render: show and size the pane, but keep it off-screen. */ + display: flex; + flex-direction: column; visibility: visible; + opacity: 1; + transform: translate(-100%, 0); + z-index: 0; } .dashboard-tab-preview-popover .ant-popover-inner { diff --git a/src/components/Dashboard/context/tabPreviewCapture.js b/src/components/Dashboard/context/tabPreviewCapture.js index 7a66ab63..0d6227dd 100644 --- a/src/components/Dashboard/context/tabPreviewCapture.js +++ b/src/components/Dashboard/context/tabPreviewCapture.js @@ -115,11 +115,12 @@ const tabPreviewPlugin = { styles.right = 'auto' styles.bottom = 'auto' styles.zIndex = '2' + styles.display = 'flex' + styles.flexDirection = 'column' styles.opacity = '1' styles.visibility = 'visible' styles.translate = 'none' styles.transform = 'none' - styles.pointerEvents = 'none' styles.overflow = 'hidden' } }