Styles from Claro admin theme are interfering with XB React app styles

Created on 23 June 2025, about 1 month ago

Overview

Have Claro set as admin theme.
In /web/core/themes/claro/css/base/elements.css there is for example a style

p {
  margin: 1em 0;
}

In XB UI, <P> tags (rendered by Radix <Text /> component) now have margin top/bottom of 1em when they shouldn't.

(observed in Firefox but I think Chrome looks ok)

Proposed resolution

I believe this was introduced when the use of scopeCss was added.

User interface changes

πŸ› Bug report
Status

Active

Version

0.0

Component

Semi-Coupled theme engine

Created by

πŸ‡¬πŸ‡§United Kingdom jessebaker

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @jessebaker
  • πŸ‡ΊπŸ‡ΈUnited States bnjmnm Ann Arbor, MI

    This is because CSS scope() is still an experimental feature in Firefox that needs to be enabled. There was a decision that we should go ahead with scope() as its addition was inevitable, but it might not be standard until later this year (2025) according to the FF team. Given that XB might have users prior to scope() working with FF out-of-the-box, we might need to come up with a workaround.

Production build 0.71.5 2024