Text field with multiple values overflows on narrow screens

Verified and tested by applying patch #5.It is working fine for D.8.9.Can be moved to RTBC.

Steps to test -
1. Go to the admin site.
2. Go to admin/content.
3. Search for the recipe content and edit it.
4. Verify

Patch #5 looks good to me as working as per functionality. Here attaching screenshots for same and changing status to RTBC

Before patch

After Patch

+++ b/core/themes/seven/css/components/tables.css
@@ -150,3 +150,13 @@ th.select-all {
+  max-width: 62ch;

I'm wondering how does this play if someone has a text field that has size higher than 60 characters? I'm also concerned about some browsers not respecting max-width for form inputs.

Tagging this issue for new contributors to work on during the Friday DrupalCon Global sprint.

Tested the patch in various browsers (Chrome, Firefox, Safari, Edge & IE11) Works well. The text fields doesn't overflow.
However, I don't think the max-width: 62ch is redundant. Also, in IE11 the text field doesn't take the full width of the container.

With max-width: 62ch

Without max-width: 62ch

IMO, we can remove the max-width: 62ch from the PR.

I have removed the max-width set and tested. This works fine.
Please find the updated patch.

@harika gujjula Thank you. When you update patches, it is best to include an interdiff:

https://www.drupal.org/documentation/git/interdiff

Though in this case it is ok since the patch is so small.

Applied the patch in #18 and works as intended. Attached the screenshots by testing on Firefox, Chrome and IE11.
Thanks @harika, for the patch.
It looks good to me. Moving to RTBC.

Tested this with a new multi-value text field item on the article content type. Works as described, so this seems like a good fix.

One niggle, this code comment reads a bit awkward, not sure it's super correct:

> Target every .form-text input that its parent is a form-item of a table cell.

Should that be something like

> Target every .form-text input where its parent is a form-item inside a table cell.

?

Thanks for the reviews. Back to needs work for comment change.

Updating the comment , kindly review.

Comment has been added as expected
Target every .form-text input where its parent is a form-item inside a table cell. */

@kristen.pol this can be moved to RTBC if no other code review is needed
Thanks

Thanks for the update and testing. A couple nitpicks:

+++ b/core/themes/seven/css/components/tables.css
@@ -151,3 +151,9 @@ th.select-all {
+/* Target every .form-text input where its parent is a form-item inside a table cell. */

1) Exceeds 80 characters.

2) The comment style switched from:

/**
 * [comment]
 */

to

/* [comment] */

It appears the latter style is normally used for inline comments (after the CSS), or sometimes if the comment is only one line long. Since the comment exceeds 80 characters, if that was changed, it would be more than one line and should switch to the former format.

@Kristen Pol thanks for the suggestions. I updated the patch. Please review.

Thanks for the update.

1. +++ b/core/themes/seven/css/components/tables.css
   @@ -126,16 +126,12 @@ th.select-all {
   -/**
   - * Captions.
   - */
   +/* Captions. */
   

   Changes here are out of scope for this issue.

2. +++ b/core/themes/seven/css/components/tables.css
   @@ -126,16 +126,12 @@ th.select-all {
   -/**
   - * Responsive tables.
   - */
   +/* Responsive tables. */
   

   Changes here are out of scope for this issue.

3. +++ b/core/themes/seven/css/components/tables.css
   @@ -151,3 +147,10 @@ th.select-all {
   +/* Target every .form-text input where its parent is a form-item inside a table
   + cell. */
   

   This doesn't address the second part of the comment in #25:

   Since the comment exceeds 80 characters, if that was changed, it would be more than one line and should switch to the former format.

   If this is not clear, it needs to change to using this formatting:

   /**
    * [comment]
    */
   

Here I have addressed comment #28.

Changing status to needs review as patch #29 passed the tests.

Thanks for the update.

1) Patch applies cleanly.

2) Tests pass.

3) Code was manually tested in #20 and #21 so I don't think it needs retesting. Subsequent changes were to comments.

4) CSS was reviewed in #12 and #16, and concerns were addressed by removing max-width: 62ch. Subsequent changes were to comments.

5) #29 addresses items from #28.

6) Although my inclination would be to try to get the text down to a one-line comment (since it spills over by only one word), the wording is what was suggested in #21. I'm not sure if this needs an automated test or needs testing on other themes, but marking RTBC to get maintainers thoughts.

Random failure , setting back to RTBC.

Committed c5489de and pushed to 9.2.x. Thanks!

Going to discuss with @lauriii about whether we should backport this to 9.1.x

Discussed with @lauriii we agreed to backport this to 9.1.x.