Select form field values are hidden at narrow screen widths in Claro theme

Sorry for the noise, I realised this isn't actually a duplicate because it only addresses Claro. The comment with screenshots from Seven made me think it would be addressed more widely but I saw the patch is just for Claro! So removing the credits and I will re-open the other issue.

I like that this is now only targeting the select because that makes this less likely to run into problems.

+++ b/core/themes/claro/css/components/tables.pcss.css
@@ -172,6 +172,19 @@ td > .ajax-new-content > .form-item > .form-element {
+td > .form-item > select.form-element,
+td > .ajax-new-content > .form-item > select.form-element {
...
+  td > .form-item > select.form-element,
+  td > .ajax-new-content > .form-item > select.form-element {

Instead of select.form-element, we could use .form-element--type-select as the selector.

Addresses the point from #45.
Please review.

Screenshots from latest patch:

Verified the patch #46 and tested it on Drupal version 10.1.x. The issue seems to be fixed after applying the patch. The select form fields are now visible and the user can scroll horizontally to view all the fields and settings section. I have added the before patch screenshot and after patch screen recording for reference. RTBC+1

Can the before/after screenshots be added to the issue summary. To show this is fixed.

Also the proposed solution is a bit vague. How is it being fixed? From what I can tell it adds a horizontal scroll is that the desired solution?

Added #3068696: Tables overflow on mobile → as related. To answer @smustgrave I think the horizontal scroll is the only way to fix this particular issue without some other, major changes to responsive tables, which are out of scope for this issue.

In that case looks good thanks for the quick response!

#46 is a 9.x patch, but we need a 10.x patch since all 10.x browsers support (min-width: max-content) so that condition isn't needed or the styles just above it that provide defaults for non-max-content browsers. #9 has a good example of how the patches can be named to be easy to identify.

#55 appears to address $54

Committed ad02e3e and pushed to 10.1.x. Thanks! Cherry-picked to 10.0.x and committed to 9.5.x.

Automatically closed - issue fixed for 2 weeks with no activity.