Fix Claro styles for exposed views filters wrapped in fieldsets

#19 patch fails to apply in Drupal 10.1.6 (see new test).
https://www.drupal.org/project/drupal/issues/3133639#comment-14119137 📌 Fix Claro styles for exposed views filters wrapped in fieldsets Needs work

I have attached the patch for 11.x Patch #32, no longer applies so not adding the interdiff

IS seems to contain a number of TBD that should be addressed.

Tried to fix failure in #37

Prashant.c → made their first commit to this issue’s fork.

Changes provided in the patches fixing the issue, removed duplicate code from the https://git.drupalcode.org/project/drupal/-/merge_requests/5811.

Keeping the MR in draft as there is still some work mentioned in #38 📌 Fix Claro styles for exposed views filters wrapped in fieldsets Needs work .

Thanks

I have updated logical properties in merge request !5811

Based on MR 1134, I added two improvements:
1. Fix alignment of grouped radio filters mentioned on #31
2. Move multi-select operator to top of flex element.

Before:

After:

As commented on Slack, this is more complex that it looks like. We're giving the option to add things to a place that is not designs to have them. If you want to have a field with 5 radio buttons, a top bar that is supposed to have horizontal things aligned is not its place. Basically, if we want to convert this search section in a box where anything can be thrown at, that’s not the place. We would need a classic vertical search section or any other modern pattern we can think of. But the top section if designed for quick and simple filters: takes fewer space and it's quick to access.

So my recommendation would be to totally rethink how we give people options, in a way that we can also recommend where to place them and provide that alternative place for complex search. Obviously it's out of scope here, but it's important to point out that this change is breaking the UX.

That said, here are a few design recommendations to make it look less bad in with fields that can be horizontally aligned:

• Horizontally align items
• Adjust field widths
• Reduce spacing between elements within the same fieldset (4px)
• Remove the visual border of the fielset/details
• Increase space between all elements in this specific area if there are fieldsets/details inisde (easily done with CSS :has) and set a separation of 24px

So from this example:

Would become:

Design can't solve much more beyond this. Things like #45 just shouldn't be done in here.