Block layout overflow issue and Incorrect style for all draggable table on mobile.

This issue is being reviewed by the kind folks in Slack, #needs-review-queue-initiative. We are working to keep the size of Needs Review queue [2700+ issues] to around 400 (1 month or less), following Review a patch or merge request → as a guide.

Think this will need to be updated for D10 themes as bartik and seven have been removed.
Tagging for tests to show the issue.
Believe this still could be issue.

This issue still persists in both Claro and Olivero themes.

While in both of them the layout content overflows, in my testing it is much worse with olivero; it makes the overflowing content illegible with the layout content not taking on white background color like it does in claro.

Link to test with Claro.
Link to test with Olivero.

I have created MR with the fix for both themes please review.

Before

After

UI changes should be included in an issue summary. Adding a sentence doesn't count. Before/after screenshots should be added

I have checked MR #15 in Drupal 11.
It fixed the Olivero issue on mobile, but the issue still persists in Claro.

Olivero
Before MR

After MR

Claro
Before MR

After MR

Removed the tag and added a screenshot, but the issue still persists.

i have fixed the issue mentioned @djsagar

before

after

saurav-drupal-dev → closed merge request !9859

Test status - Pass
Verified an issue on Drupal 11.X version for Olivero and claro themes. MR applied successfully. Issue looks fixed.

Followed steps below-
1. login as admin
2. use claro or olivero
3. goto => structure => block layout
4. switch to mobile device you will see contents are overflowing outside page from right.

Attaching screenshots for reference.

RTBC+1

We have scrollable tables with scroll indicators in Gin

So we might want to consider re-using Gin’s implementation here also to avoid potential conflicts and issues

Should investigate #31since it came from a claro maintainer

I am working here to implement Gin's process as mentioned in #31.

Another thing i want to ask that changes should be done for only Claro theme right? it does not make any sense to implement the same for Olivero as it is not a admin theme. Please correct me if i am wrong.

Hi @saschaeggi, @smustgrave,

I have worked on fixing the issue and add some change to table.html.twig file as i applied a parent div to the table so i can apply overflow-x: auto to it as same as Gin. This issue is not only for Block layout page this issue will occur everywhere where table twig file is rendering so i had to change the table.html.twig file. As i see i also need to change the view-view-table.html.twig also as the same issue is coming from it. So should i change the views table twig file in this issue queue?

In the current MR, I haven't applied the changes for the Olivero theme. Please let me know if you would like me to include those adjustments as well.

Thank you!

I checked this issue and MR. Faced same problem on Drupal fresh set up. After applying MR as a patch it resolves problem. Moving this issue to RTBC as it looks fine.
Adding some screenshots related to my testing.

Ohh, Current MR is not applied for Olivero theme. Moving this to Needs Review.
@saschaeggi, @smustgrave, Please check and provide your feedback.

https://www.drupal.org/project/drupal/issues/3068696 → I found this issue which is already working for fixing the table responsive issue for claro theme. I think we can close or Duplicate this issue. @smustgrave, can you please look into it.