Claro's Place block layout is broken for mobile screen.

Verified and tested patch #4.
Patch applied successfully and found some issues.

Testing Steps:
# Go to any responsiveness device
# Goto: admin/structure/block
# Click on Place block

Expected Results:
# User should not see horizontal scroll bar once clicking on "Place Block"

Actual Results:
# Horizontal scroll bar appearing once the user clicks on "Place Block"
# Pop-up should be appearing fully and should see in full width without scrolling horizontally.
# Same functionality and UI should be worked for all "Place Block" buttons once the user clicking on that.

Moving to Needs Work.

After applying patch #4 issue is not resolved, it's also creating another issue, if you are using the right: 0; on ui-dialog-off-canvas there is no space between the left side and popup.

you can use overflow: auto; on table when table is fixed popup automatically comes on screen.

Already we have one issue open regarding table overflow

https://www.drupal.org/project/drupal/issues/3132811

once it's fixed popup issue also get fixed by default.

Thanks!

i applied the patches but didn't get any changes the results are same for reference sharing screenshot ....

Please review the patch.

@Shubham Sharma 77 looks like the patch in #11 was intended for a different issue.

The tables causing horizontal scroll in #6 is very out of scope here because

• It's true for all themes (not just Claro) when tables exceed the viewport width
• It's also true for all tables exceeding the viewport width, it's not specific to the block layout form or the issue reported here.

It's not clear if the screenshots in #16 are reviewing the MR or a patch - and if it is a patch it's not clear which one. Either way, the "after" screenshot is at a wider screen width than what would cause the reported problem so it doesn't demonstrate anything is fixed

Every solution I've seen here is adding CSS that impacts every (non off-canvas) dialog, so reviews need to look at more dialog use cases than just the one reported here OR the solution should be targeted to the Place Block dialog. We need to be sure a fix in one place doesn't cause regressions elsewhere

Lets keep reviews and changes to the merge request - and for those unfamiliar with them check out this guide. It takes ~10 minutes to learn and is much easier than dealing with patches. If anyone has trouble adjusting to Merge Requests, find me on Drupal .Slack and I'm happy to help.

The solution in in the merge request definitely has issues. I've attached a video showing that the dialog now floats off screen as the viewport is narrowed. That's a bigger bug introduced than the one reported here 🙂

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

#22 Patch will affect the other dialog styling

Digging into this issue I found two test cases -

First Case - When placing a block on the desktop and then resizing the screen on mobile view the modal has a padding issue from the left side.
See - place-block-popup-on-desktop.mp4

Second Case - When first resizing the screen on mobile view then placing the block and seeing modal works fine.
See - place-block-popup-on-mobile-screen.mp4

Verified using patch- 3209870-26.patch in #26
After and Before patch result are both same no difference.
The MR is giving error.

Testing steps :
1. Install Drupal, set the Claro theme
2. Open Block Layout
3. open place block

Moving to Need work

I have gone this frontend issue on claro theme. In claro theme there is not a lot of space to adjust a table of drupal modal on mobile view. So Horizontal scroller will be shown for watch full drupal-modal. As I think if table structure will come into the drupal-modal then Horizontal Scroller will also come mobile view. It can be adjustable till if there is space for adjust on mobile view.

We can see difference between two different theme drupal-modals.
attaching ScreenShot.
1. Claro theme drupal-modal Screenshot
2. Bartik theme drupal-modal Screenshot

Have not reviewed or tested

But issue summary should follow standard issue template.

Added standard template.

I am working on it.

Unassigning myself from this issue as I am unable to proceed with the fix.