Portal container ⋮ menu to body to stop row steal and scrollbars
Release rolling / release (push) Successful in 8m27s

Replace Bootstrap table dropdowns with a fixed body-portaled menu so
hovering other rows no longer opens their menus and the open menu no
longer expands table overflow.
This commit is contained in:
2026-07-11 22:00:07 -04:00
parent 57c87259ad
commit 41d71b57a3
2 changed files with 214 additions and 195 deletions
+27 -72
View File
@@ -2372,8 +2372,6 @@ textarea::placeholder {
flex-wrap: nowrap;
max-width: 100%;
position: relative;
overflow: visible;
z-index: 1;
}
.container-actions-primary {
@@ -2386,59 +2384,52 @@ textarea::placeholder {
white-space: nowrap;
width: 10.5rem;
max-width: 10.5rem;
overflow: visible !important;
overflow: hidden;
position: relative;
text-align: right;
z-index: 1;
}
.container-actions-more {
position: relative;
z-index: 2;
}
.container-actions .btn {
flex: 0 0 auto;
}
/* In-table menus stay hidden — open menu is portaled to body */
.container-actions .dropdown-menu:not(.pd-portaled-actions-menu),
.container-actions-dropdown-menu:not(.pd-portaled-actions-menu) {
display: none !important;
}
/*
* ⋮ more-actions menu: Popper strategy "fixed" (app.js initContainerActionsDropdown)
* so the menu escapes table paint order and stays above toolbars/titlebar.
* z-index must beat #titlebar (1100), #sidebar (1000), activity tray (1200).
* Stay below full-screen modals (3000).
* Portaled ⋮ menu (appended to <body> while open).
* position:fixed + high z-index — never expands table overflow/scrollbars.
*/
.container-actions-cell .dropdown {
position: relative;
}
.container-actions .dropdown-menu,
.container-actions-dropdown-menu {
.pd-portaled-actions-menu,
.dropdown-menu.pd-portaled-actions-menu,
.container-actions-dropdown-menu.pd-portaled-actions-menu {
position: fixed !important;
z-index: 10050 !important;
min-width: 11.5rem;
max-height: min(70vh, 28rem);
overflow-y: auto;
overflow-x: hidden;
font-size: 13px;
z-index: 2800 !important;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-strong);
background: var(--bg-elevated) !important;
}
/* Popper fixed menus — keep above everything short of modals */
.container-actions-dropdown-menu.show,
.dropdown-menu.container-actions-dropdown-menu.show {
z-index: 2800 !important;
display: block !important;
visibility: visible !important;
pointer-events: auto !important;
margin: 0 !important;
inset: auto !important;
transform: none !important;
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-strong);
background: var(--bg-elevated) !important;
color: var(--text-primary);
}
/* Closed menus must never paint (Popper leftovers / list refresh desync) */
.container-actions .dropdown-menu:not(.show),
.container-actions-dropdown-menu:not(.show) {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Containers table shell */
/* Containers table shell — never unlock overflow when menu open */
#containers-view .table-responsive {
overflow-x: hidden !important;
overflow-y: auto;
@@ -2449,55 +2440,19 @@ textarea::placeholder {
}
#containers-view .table {
overflow: visible;
width: 100% !important;
table-layout: fixed;
}
/* Text truncates by default; actions cell stays usable */
#containers-view #container-list > tr > td {
overflow: hidden;
}
#containers-view #container-list > tr > td.container-actions-cell {
overflow: visible !important;
position: relative;
z-index: 2;
overflow: hidden;
}
/*
* Critical: elevate the ENTIRE open row above following rows.
* Raising only the actions cell is not enough — later <tr> still paint over the menu.
*/
#containers-view #container-list > tr.row-menu-open,
#containers-view #container-list > tr:has(.dropdown.show),
#containers-view #container-list > tr:has(.dropdown-menu.show),
#container-list > tr.row-menu-open,
#container-list > tr:has(.dropdown-menu.show) {
position: relative;
z-index: 100;
}
#containers-view #container-list > tr.row-menu-open > td,
#containers-view #container-list > tr:has(.dropdown.show) > td,
#containers-view #container-list > tr:has(.dropdown-menu.show) > td {
position: relative;
z-index: 100;
overflow: visible !important;
}
#containers-view #container-list > tr.row-menu-open > td.container-actions-cell,
#containers-view #container-list > tr:has(.dropdown.show) > td.container-actions-cell {
overflow: visible !important;
z-index: 110;
}
/* Search / filter toolbar must not stack above open action menus */
#containers-view .page-header,
#containers-view .view-toolbar {
position: relative;
z-index: 1;
}
/* Do NOT elevate open rows — that stole mouse events over rows below */
/* Accordion bodies must stay collapsed when not .show (defensive vs BS CDN lag) */
.accordion-collapse.collapse:not(.show) {