Input elements lack consistency.

[Cerbrus]

Describe the bug

There's a lot of inconsistency in the styling of input elements and buttons:

• Input elements are rendered with different background colors, borders and even sizes.
• Buttons aren't aligned, and inconsistently either have a border or a background color
• (The "expand/collapse" arrow for the filter expansion is huge)

See screenshot.

To Reproduce Steps to reproduce the behavior:

1. Go to https://software.codidact.com/
2. Click on 'Filters (None)'
3. See layout / styling issues

Expected behavior

• I'd expect all input elements to be the same size, color, and have the same borders.
• I'd expect all buttons to be aligned vertically.
• I'd expect all buttons to have consistent styling. (border / background color: Either everything has a border, or nothing)

Screenshots

Desktop:

• OS: Windows
• Browser: Chrome
• Version: 119.0.6045.106 (Official Build) (64-bit)

Additional details

The CSS responsible for the (mis-)alignment of that [apply] button is this:

@media screen and (min-width: 780px)
.form-group-horizontal>:last-child {
    margin: 0 0 0 0.5em !important;
}

Disabling that fixes the alignment:

[cellio]

@MoshiKoi is this an issue in co-design itself or in how the filters code is using it?

[MoshiKoi]

Is there a reason for that piece of code that was misaligning the last button? It's marked important after all.

[Oaphi]

Is there a reason for that piece of code that was misaligning the last button? It's marked important after all.

@MoshiKoi yes, unfortunately, there is - apparently, it exists to align horizontal form elements (see screenshot). I plan to style the filters component with its own ruleset - that should solve the immediate problem. However, the .form-group-horizontal's rulesets likely need to be rethought as well.