fix: added a label element to the NcSelect in update settings

[emoral435]

• Resolves: [BITV]: Select has no connected label #43088

Summary

@JuliaKirschenheuter (all credit to her) found that in index.php/settings/admin/overview, there is a NcSelect without a corresponding label. This fixes that, No visual change, gave the label input the corresponding styles that would accompany the change from h4 element 👍

TODO

• Added a label to correspond with out input element, as well as matching their ID's

Checklist

• Code is properly formatted
• Sign-off message is added to all commits
• Tests (unit, integration, api and/or acceptance) are included
• Screenshots before/after for front-end changes
• Documentation (manuals or wiki) has been updated or is not required
• Backports requested where applicable (ex: critical bugfixes)

[emoral435]

Will /backport once accepted by reviews :)

[emoral435]

/compile amend/

[ShGKme]

Some nitpicks

[ShGKme]

No visual change, gave the label input the corresponding styles that would accompany the change from h4 element 👍

I think we can make it plain text. It looks inconsistent now, not sure it was needed to be h4 with h4 styles. cc @szaimen

[emoral435]

@Pytal Fixed! And styling should be the same - had to add high order specifiers with ID's and whatnot because Vue's default styling on their Select component was beating out most things I tried. This kept it pretty consistent:

[Pytal]

I'd say we should to drop the custom select__label styles and set width: fit-content on the wrapper + min-width: 100% on the dropdown toggle to have the select and label be the same width

@nextcloud/designers for design input

[emoral435]

Agreed, IMO I think that having the label be 900px wide but then having the select be way smaller is a bit weird. Will push this then try to see what the designers say. Here is how it looks like, for the @nextcloud/designers :

[szaimen]

Agreed, IMO I think that having the label be 900px wide but then having the select be way smaller is a bit weird. Will push this then try to see what the designers say. Here is how it looks like, for the @nextcloud/designers :

Honestly from design perspective I'd say this detail doesnt really matter as there are many other things on this page that don't look visually perfect 😅🙈

[susnux]

/compile amend

[susnux]

/backport to stable28