mirror of
https://github.com/element-hq/element-call.git
synced 2026-10-09 01:07:29 +00:00
Find Element Call's root by attribute, not by being the body
Six selectors named `body` directly — the gradient backdrop and the platform font overrides in index.css, and the iOS adjustments in AppBar.module.css and Modal.module.css — so they only applied when Element Call owned the page. A host mounting it into a container would have got an interface decorated correctly and styled incorrectly, with nothing to show that anything was wrong. Mark the root element with data-element-call-root and match on that instead. Scoping this way keeps the selectors more specific than they were, rather than less: widening them to a bare [data-platform=…] would have dropped specificity from (0,1,1) to (0,1,0) and changed which rules win. The platform attribute moves with them, from the initializer's write onto document.body to a layout effect on the root, alongside the theme — so it still lands before anything is painted. No visual change while Element Call owns the page: the root is the body, which now carries the attribute, so every rewritten selector matches the element it always did.
This commit is contained in:
@@ -48,7 +48,7 @@ Please see LICENSE in the repository root for full details.
|
||||
--handle-inset-block-end: var(--cpd-space-4x);
|
||||
}
|
||||
|
||||
body[data-platform="ios"] .drawer {
|
||||
[data-element-call-root][data-platform="ios"] .drawer {
|
||||
--border-radius: 10px;
|
||||
--handle-block-size: 5px;
|
||||
--handle-inline-size: 36px;
|
||||
|
||||
Reference in New Issue
Block a user