Quickedit in Tabledrag has overflow

I have attached a patch, please verify if it is working or not.

Adding after patch screenshot for ref.

I manually tested the patch #3 and it is working fine. Adding after patch screenshot for reference.

@mitthukumawat Your screenshot shows the overflow issue. Did you upload the wrong image?

I reviewed the code change and it's fine and tests are passing. If we get a good screenshot with it patched, this is RTBC if we don't need tests which I'm assuming we don't for this type of visual issue. Well, unless we want to fix Bartik now as well, or that could be a follow-up issue.

@Kristen Pol
I have added that screenshot for bartik theme. I am adding new screenshot for Olivero. We will need it to be fixed for bartik theme as well.

Report Bartik issue on Bartik theme, not here. @mitthukumawat.

@Gauravmahlawat You are right, I have created that issue in bartik theme.

Verified and tested patch#3 on the drupal 9.3.x-dev version and Olivero 9.3.0-dev version. Patch applied successfully and looks good to me.

Testing Steps:

1. Install drupal 9.3.x-dev version with default Umami demo site profile.
2. Go to Appearance -> Set Olivero theme as admin and default theme
3. Go to Content and click on any recipe content.
4. Click on the "Quick Edit" option.
5. Observe the Quick edit in Tabledrag has overflow on the other part of the page.
6. Now apply the patch and clear catche.
7. Again go to the content view page and click on "Quick Edit" option and verify after patch at time of Quick edit Tabledrag not overflow on the other part of the page.

Testing Results:
After applying the patch Quick edit in Tabledrag has not overflow on the other part of the page.
Please refer attached Before patch and After patch images for reference.

Moving this ticket to RTBC.

Random failure, moving to RTBC

Patch updated. please review.

Patch updated.

Thanks for the update. Marking RTBC based on:

1. Manually tested similar to #9 and the overflow is fixed (see screenshots)
2. Also used quick edit form to make changes and they worked as expected
3. CSS is now limited to quickedit-form per feedback in #13
4. Automated tests pass
5. Assume additional tests aren't needed since this may be very difficult to write a test for

I'm not sure how this is supposed to work but I'm not sure this is more usable than before. For example on my screen, you can see how narrow the textfields are after applying the patch:

Hi @Gauravmahlawat thanks for the #16 patch.

Hi @lauriii i have made some changes (Reduced the space b/w the input fields) please review.

Adding screenshot after reduced space.

Fixing the custom command failure.

Patch #21 has good spacing for the column. Works as intended. Moving to rtbc.

Before:

After:

Based on screenshots in #20, I think #19 is still an issue. Maybe this is something that should be reviewed in one of the UX meetings.

Hi all

We discussed this issue at #3221110: Drupal Usability Meeting 2021-07-02.

We first looked at the screenshots and then tested the patch on a local Drupal site to compare what was happening.

After discussing this for a bit we settled on the following points/recommendations:

1. We thought that the patch was generally an improvement over the current situation.
2. However, we did wonder if it was possible for text input boxes to wrap their text, so it doesn't overflow and doesn't require scrolling the cursor along to read everything. I did a quick search online and it looks like it might not be possible for text inputs, despite that we still felt this was an improvement.
3. It would seem that this problem likely occurs for other themes where Quick Edit is used and may not be specific to Olivero. We felt it would be best to try and fix this problem in Quick Edit itself. Since Quick Edit is injecting its UI and CSS into the page when it is in use, we felt this was appropriate, fix it for all themes not just one. I also noted that there may be precedent for doing this, I was involved in a similar kind of fix for select lists on the Off Canvas Dialogue #3043467: Multi-select list items "escape" bounding box in Off-Canvas Forms when using WebKit and Mozilla based browsers which landed in a minor release (actually was yourself @lauriii who signed off on us fixing that).
4. I have a feeling I'm forgetting something, but can't check until the recording is posted, so I might be back with an update tomorrow, either way, points 1-3 stand.

Edit 6 July 21: I reviewed the recording and I believe I did cover all the key points above, so striking off point 4 above as it is no longer relevant.

Thanks,
-Aaron

I said this at the Usability meeting yesterday. The whole point of Quickedit, rather than the traditional edit form, is to see the things you are editing in context. Comparing the two screenshots in #22, I think the one with the patch applied does a better job.

I did not see anything with the text cut off like the screenshot in #19. I think that is because the patches in #20, #21 made an improvement.

As per #24, moving this to quickedit.module, to see if we can address this issue in the Quick Edit CSS itself.

Due to Quickedit being moved out of Drupal Core and into a Contrib Module, moving this issue to the Contrib Module queue.