Skip to content

UX: handle node-red-dashboard css poisoning #5540

@knolleary

Description

@knolleary

node-red-dashboard includes a custom css rule for .red-ui-tabs that is not properly scoped so applies to everything. Specifically, its setting margin-bottom: 15px;

https://github.com/node-red/node-red-dashboard/blob/41ef61145f75a76201a9bf10bc2400af979203b1/nodes/ui_base.html#L177

I suspect the 4.x styling of tabs meant this went un-noticed, but with the new NR5 tab bar in the header, this CSS is causing problems:

Image

The node-red-dashboard module is deprecated and not going to receive any updates. But it still gets used.

The purpose of this task is to set appropriate CSS rules to counter-act this css poisoning - ie, a more specific rule set that means the bare .red-ui-tabs has lower priority so is ignored.

To recreate:

  1. install node-red-dashboard
  2. reload editor - observe the now misaligned tab bars

Metadata

Metadata

Assignees

Type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions