vertical mis-alignment of elements in ui-nodes if "Display group name" is enabled

[jodelkoenig]

Current Behavior

A ui node with group name disabled is perfectly vertically centered

As soon as group name is enabled text/items of corresponding node are off vertical center

This leads to design limitations as shown here

--> See f.e. "Fenster & Beschattung" or "Beleuchtung", same is valid for all other items on this screenshot though
(Note: In my productive version background is #000000/black. For the sake of easier reading I changed it to #C0C0C0/grey)

Expected Behavior

elements should always be centered

Steps To Reproduce

1. Setup an element and add it to a group.
2. Change color of group header background to something different to make it more obvious

ui-template with f.e.:
/* group header */ .v-card-item { background-color: #000000; }

3. Turn on / off - "Display group name"

Environment

• Dashboard version: 1.19.1
• Node-RED version: 4.0.5
• Node.js version: 20
• npm version:
• Platform/OS: docker
• Browser: all

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate