Select widths not taken into account when table is rendered

We can change width as auto for form-element of Claro theme table component. That will help select field to stretch based on it's select options.

Testing Steps:

• Go to any view settings which has table format. Or create a new view with table format.
• Check select list value. It shouldn't be cropped.
• All select list value should display properly on all devices.
• Also check attached image for reference.

Thanks. Updated patch. Made change more specific to select element.

Tested patch from #8. Select width are ok now, but buttons are too big now, which was not the case before - probably regression

Thanks for your feedback @KondratievaS. We have also faced same issue but not in incognito window of browser. It's might be your browser cache. Please clear your browser cache and then test it again.

Thanks for your comment @pradeepjha. You are right - can not reproduce this bug anymore

Thanks for working on this issue!

Tagging for frontend committer review.

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

Is there a particular reason the select element has to be strictly at the root of the cell? Could we just target td .form-element--type-select?

@lauriii @bnjmnm For #15 targeted select element using child selector I think @pradeepjha used same implementation as per previous for select like below from existing code which is good to go,

td > .form-item > .form-element,
td > .ajax-new-content > .form-item > .form-element

And If we directly target form elements inside TD like below,

+++ b/core/themes/claro/css/components/tables.pcss.css
@@ -179,13 +179,13 @@
  * Target every .form-element input that parent is a form-item of a table cell.
  * This ignores the filter format select of the textarea editor.
  */
-td > .form-item > .form-element,
-td > .ajax-new-content > .form-item > .form-element {
+td .form-element,
+td .ajax-new-content .form-element {
   width: 100%;
 }
 
 /* Force browsers to take auto width for 'select' element. */
-td > .form-item > .form-element--type-select {
+td .form-element--type-select {
   width: auto;
 }

It will target all form elements (input, select, etc.) inside TD & break other form elements that are nested. See the below-attached screenshot. Example from /admin/structure/types/manage/article/form-display widget and it's settings from icon.

In my opinion, we should go head with the child selector approach(td > .form-item > .form-element--type-select), Feel free to add your opinion.

Minor update in the patch related to select element, Kindly review.

Thanks!

After adding a latest patch, select list width is appearing as expected on all the browsers and devices.
This can be moved to RTBC

Is there a particular reason the select element has to be strictly at the root of the cell? Could we just target td .form-element--type-select?

Re #15:
I think the key point is having 100% set on all form elements. It does look better on a visual perspective, but it’s overriding a feature that gives clues to the user about how much content is expected to be filled. So UI is breaking UX. I'd say setting width: auto (or removing it entirely, not sure about the code) gives this control back to whoever is defining the form.
A clear example is with smaller fields inside a multiple field: (thanks @slv_ for the screenshot and rising the issue!)

#25 Just Re-roll the patch

This issue I am not able to reporoduciable on 9.3.x version
Working as Expected.

Testing Steps:
# Goto: admin/appearance -> Apply Claro theme
# Goto: http://drupal9-3.dd:8083/en/admin/structure/views/view/comment
# Click on Settings under Format
# Check the width in table

Looks good to me.
Please find attached screenshots.

#30 Please review the patch

Seems to be a duplicate of #3159896: Select form field values are hidden at narrow screen widths in Claro theme but I haven't compared the patches.

Closing as a duplicate of #3159896: Select form field values are hidden at narrow screen widths in Claro theme.