diff --git a/assets/css/app.css b/assets/css/app.css index 5d7ff107..f39dacbd 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -926,6 +926,21 @@ pointer-events: none; } +/* + * Sub-field sort menu (composite Member column). A native Popover-API element in + * the browser TOP LAYER so it escapes the members table's overflow; placement is + * pure CSS anchor positioning (the "⋮" trigger carries anchor-name, this popover + * carries position-anchor). `position-area` drops it just below the trigger, + * right-aligned, and `position-try-fallbacks` flips it above when there is no + * room below. The SubfieldMenu hook only toggles it — no coordinate math. This + * mirrors the payment-badge popover approach (§548) for a consistent look/feel. + */ +.popover-menu { + margin: 0; + position-area: bottom span-left; + position-try-fallbacks: flip-block; +} + /* * Vertically center the row checkbox in the sticky first column using the * table-native vertical-align: middle. This keeps display: table-cell intact so diff --git a/assets/js/app.js b/assets/js/app.js index 73e52fa5..85ea1875 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -407,6 +407,12 @@ Hooks.PopoverTooltip = { this.el.addEventListener("mouseleave", this.hide) this.el.addEventListener("blur", this.hide) this.el.addEventListener("keydown", this.onKey) + // Hide on activation: a click (sort/reset) triggers a LiveView re-render that + // re-emits the tooltip element without the JS-set inline top/left, which would + // otherwise leave the still-open popover stuck at the default (0,0) position, + // covering the header. Closing it here keeps it out of the re-render; the next + // hover repositions it cleanly. + this.el.addEventListener("click", this.hide) }, destroyed() { @@ -416,6 +422,121 @@ Hooks.PopoverTooltip = { this.el.removeEventListener("mouseleave", this.hide) this.el.removeEventListener("blur", this.hide) this.el.removeEventListener("keydown", this.onKey) + this.el.removeEventListener("click", this.hide) + } +} + +// SubfieldMenu hook: toggles a native Popover menu (top layer, so it escapes the +// overview table's overflow clipping) for choosing the composite Member column's +// sort sub-field. Attached to the "⋮" trigger; data-menu-id names the