Sibling selector in injected styles causes large style recalculations #164

src/UI.js injects this rule into the page (still present in SDK 19.0.0, served by https://sdk.gleap.io/latest/index.js):

.gleap-tour-popover-navigation-btns button + button {
  margin-left: 4px;
}

Because the subject of this sibling selector is a bare button, Chrome restyles sibling subtrees whenever a node is inserted anywhere in the document, not only inside Gleap's UI. On a large app page (~19k DOM nodes, ~1.7k buttons), this doubled the style recalculation of every popover open/close: ~2,000 extra elements restyled per interaction, ~80–110 ms with 4x CPU throttling in a production build. Removing only this rule brings the recalculation back to its baseline.

The container is already a flex box:

.gleap-tour-popover-navigation-btns {
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
}

so adding gap: 4px; to it and dropping the button + button rule gives the same layout without the sibling selector.

We currently work around it by deleting the rule from style.gleap-styles at runtime and inserting .gleap-tour-popover-navigation-btns { gap: 4px; }.