Enhance Dashboard Tab Styles and Capture Logic
All checks were successful
farmcontrol/farmcontrol-ui/pipeline/head This commit looks good

- Added isolation and improved z-index management in CSS for active and inactive dashboard tab panes, enhancing visual clarity.
- Updated styles for inactive tabs to improve layout handling and visibility transitions.
- Modified tab preview capture styles to ensure consistent display and layout during rendering, improving user experience.
This commit is contained in:
Tom Butcher 2026-09-18 22:29:06 +01:00
parent 969f5fece2
commit 0aee5b410f
2 changed files with 16 additions and 7 deletions

View File

@ -4015,6 +4015,7 @@ body.objectKanbanColumnResizing * {
.dashboard-tab-panes { .dashboard-tab-panes {
position: relative; position: relative;
isolation: isolate;
flex: 1 1 auto; flex: 1 1 auto;
min-height: 0; min-height: 0;
height: 100%; height: 100%;
@ -4035,23 +4036,30 @@ body.objectKanbanColumnResizing * {
} }
.dashboard-tab-pane-active { .dashboard-tab-pane-active {
z-index: 1; z-index: 2;
pointer-events: auto; isolation: isolate;
display: flex;
visibility: visible;
opacity: 1;
transform: none; transform: none;
} }
.dashboard-tab-pane-inactive { .dashboard-tab-pane-inactive {
z-index: 0; z-index: 0;
overflow: hidden; overflow: hidden;
pointer-events: none; display: none;
visibility: hidden; visibility: hidden;
transform: translate(-100%, 0); opacity: 0;
} }
.dashboard-tab-pane-inactive.dashboard-tab-pane-capturing { .dashboard-tab-pane-inactive.dashboard-tab-pane-capturing {
/* Stay translated off-screen so capture cannot cover the active tab. /* Preview render: show and size the pane, but keep it off-screen. */
Layout size stays 100% of the host for SnapDOM. */ display: flex;
flex-direction: column;
visibility: visible; visibility: visible;
opacity: 1;
transform: translate(-100%, 0);
z-index: 0;
} }
.dashboard-tab-preview-popover .ant-popover-inner { .dashboard-tab-preview-popover .ant-popover-inner {

View File

@ -115,11 +115,12 @@ const tabPreviewPlugin = {
styles.right = 'auto' styles.right = 'auto'
styles.bottom = 'auto' styles.bottom = 'auto'
styles.zIndex = '2' styles.zIndex = '2'
styles.display = 'flex'
styles.flexDirection = 'column'
styles.opacity = '1' styles.opacity = '1'
styles.visibility = 'visible' styles.visibility = 'visible'
styles.translate = 'none' styles.translate = 'none'
styles.transform = 'none' styles.transform = 'none'
styles.pointerEvents = 'none'
styles.overflow = 'hidden' styles.overflow = 'hidden'
} }
} }