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:
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:
- install
node-red-dashboard
- reload editor - observe the now misaligned tab bars
node-red-dashboardincludes a custom css rule for.red-ui-tabsthat is not properly scoped so applies to everything. Specifically, its settingmargin-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:
The
node-red-dashboardmodule 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-tabshas lower priority so is ignored.To recreate:
node-red-dashboard