.root { display: inline-flex; align-items: center; width: 100%; min-width: 0; } .title { display: flex; width: 100%; min-width: 0; } /* Invisible hit-area around the IconButton so the cursor can travel from the title up to the button without leaving the hover area (interactive=true keeps the popover open while hovering the content). padding-bottom matches moveBy.y so the bridge reaches the title's top edge. */ .hoverBridge { display: inline-block; padding: 4px 13px 4px 4px; background: transparent; } /* Popover content is portaled to via appendTo="window", so it isn't a descendant of the trigger. WDS sets data-content-element on the portaled element to a unique id that includes our dataHook ("add-field-popover"), so we link to it that way. */ :global( [data-content-element^='popover-content-add-field-popover-'][data-hook='popover-content'][class] ) { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; }