[Bug]: Device settings page has confusing whitespace

[andrebk]

What happened?

The device settings page has a bunch of options, usually with an input box or checkbox. Above(?) the input element is a description of the setting. However, oftentimes the whitespace above and below a setting is very similar, and it is hard to tell which description belongs to which input element.

For example in this screenshot:

1. The friendly name input box has less whitespace to "Retain MQTT messages of this device" below than actual description above
2. "Retention" title is right next to "Retention" checkbox, so clearly they look like they belong together even though that's wrong
3. "QoS" description is a text input. It has little whitespace up to the textbox above, and larger whitespace to the one below, so it looks like it should be entered into the box above.

Another screenshot from the debounce section:

1. I honestly don't know if I've screenshot the correct region here, because I'm so confused as to what goes where
2. There is a big divider line in the middle. That makes me think that the things above and below the divider are not related, but it looks like they are? Makes it look like the text input above is for "Ignore debounce".
3. I have no idea which input the big + icons belong to

I hope I don't come off to negative here, I just want to try explain how I find this page confusing.

It looks to me like this code is autogenerated from a schema and is still using the default styling (or is maybe styled for another browser, I've only tested on firefox). Hopefully that means it should be fixable with only some CSS magic.

What browsers are you seeing the problem on?

Firefox

Relevant stacktrace

N/A

Did you download state.json.zip?

I will not attach state.json.zip

[nurikk]

We're using external library with bootstrap4 theme to generate this page, and it's not fully compatible with bootstrap5. If you can help with making things look nice, it much appreciated

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[nurikk]

I’ve done one iteration over this issue. Should be better in latest dev branch

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.