bext: fix styles conflict on GitLab
Created by: taras-yemets
Closes #32462 (closed)
Notes on implementation
| State | Screenshot | Note |
|---|---|---|
| Browser extension disabled |
 
|
Background is defined as var(--gray-10, #fafafa). Variable --gray-10 is not defined and fallback color #fafafa is used. |
| Browser extension enabled |  |
- client/branded/src/global-styles/colors.scss defining --gray-10 is loaded (it's imported by client/browser/src/app.scss) - As there is no other rule overriding --gray-10 value, the one from client/branded/src/global-styles/colors.scss is used |
| Suggested fix |  |
Set --gray-10 value to equal the initial fallback value #fafafa for GitLab. |
Implementation weak spot
- If GitLab updates its stylesheets to include
--gray-10value, it will be overridden by browser extension styles as browser extension stylesheets are injected at the very end of<head>.
Possible solution
- Inject browser extension stylesheets above the code host ones.
- Prefix browser extension CSS variables to avoid conflicts.
Test plan
sg run bext- enable extension for browser
- open GitLab project board and ensure that the styles issue is no longer reproduced