Text inputs can create horizontal scrolling at narrow viewports in Olivero

@bnjmnm I've created a patch for your comments #2 &3 in #3190262: [META] Assess Olivero for WCAG Resize Text and Reflow success criteria.. This is the first patch I've ever pushed up to drupal.org if you can believe it, so I hope that it works and that it's properly done. Please let me know if it works and if there's anything that I can improve. I'm ready for constructive criticism.

Cc @mherchel

Here are four screenshots of the fix in both small (320px) and large (1301px) screens.

Search Results form at/under 320px (small)

Search Results form over 1301px (large)

Form Style elements at/under 320px (small)

Form Style elements over 1301px (large)

Changing to Needs Review

@katannshaw thanks for working on it, but i'm thinking if your code can be reorganized a little bit. From the quick local tests i figured out it happens only when input element has the "size" attribute with some big value, like 30 and bigger. So better exclude .form-item selector from your code, and keep only .form-element selector as it is, since described issue is related to form element only. Also sometimes form-element may live without form-item wrapper in case of some custom forms / bad generated forms (which is a common case on real projects).

I'm also thinking if your code can be moved to form-text.pcss.css file

@kostyashupenko: Thanks for your input. It all makes sense. Here's a new patch with all of your suggested changes. Please check it out and let me know if it fixes things on your side as well.

Updated the patch in #6 to fix the Custom command errors... With the updated patch, ran the yarn command with no errors.

$ yarn lint:css
yarn run v1.22.5
$ stylelint "**/*.css"
Done in 12.52s.

Thank you!

@ankithashetty you forgot to update compiled file
now, yarn lint:css returns nothing

Oh yeah, right @kostyashupenko! Sorry, my bad...

I've checked the latest patch 3192656-9.patch in a 320px viewport using the Style Guide module, Form Style module, and Search Results form. As seen in the screenshots below, I'm seeing issues with all three of them. If someone else can test this patch out to see if you see what I'm seeing I'd appreciate it.

Style Guide screenshot

Form Style screenshot

Search Results screenshot

Hi @kostyashupenko,

Patch no #9 is working for me.

Thanks!

Applied patch #9 its not working.Needs work

I've created a rerolled patch from #6 that includes the lint check that I missed previously via `yarn lint:css`. It works for me on form fields, which can be verified through the Form Styling module. One thing I noted, and also noted in Abhijith S's video is that the tables as seen through the Style Guide module are causing reflow issues. I'll create a separate issue for those.

Fixed issue from #14.

Test case are green, so moving to needs review.

Thank you @adityasingh. Not sure why my CSS didn't get updated during compiling. Your patch #15 worked for me. Not sure why your patch would affect what's marked in the initial fail but it's now marked passed. Marking RTBC.

Re-roll of patch from #15.

Hi @katannshaw
Patch no #21 is working for me.

Thanks!

Committed 258b5d2 and pushed to 9.2.x. Thanks!

Crediting @bnjmnm for the accessibility reseach on the meta issue.