Skip to content

CSS modifiers applied incorrectly #11672

@timkinnane

Description

@timkinnane

@ggazzo I found a CSS bug that I don't quite understand, regarding the use of a CSS protocol I only just learned is called BEM. This bug relates to syntax modifiers on the header.

The file changes seem to track to your PR #10300 but I'm not sure if that's the source of the css or maybe you just modified something else in the file.

In the header CSS, there's a __block modifier, which I assume is applied by JS to change the display mode for different views / device versions? It's removing the padding from the unmodified class. See source here:

https://github.com/RocketChat/Rocket.Chat/blob/develop/packages/rocketchat-theme/client/imports/components/header.css#L2

Example here:

padding

I think it's incorrectly replacing instead of adding to to the base class styles. I'm not sure if all the BEM modifiers are broken or just this one. There's quite a few weird UI display alignment issues showing up lately.

Metadata

Metadata

Assignees

Labels

area: ui/uxRelated to UI/UX, frontend code, accessibility, and user interaction

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions