Adjust hardcoded widths in dialog modals

It looks like jQuery UI dialog can handle % or vw widths?
for example these will both work:

jQuery('h1').dialog({width: '60%'})

jQuery('h1').dialog({width: '30vw'})

This means we don't need to do anything wild in Drupal to allow this, but we ought to provide a PR to https://github.com/jquery/api.jquery.com to get their docs current as they currently say it only accepts a pixel value for width:

How the width work acts is essentially as a max-width for the dialog. Usually the max-width is set as a static value instead of a dynamic value to ensure that text remains legible on large screens. On pages like content edit forms where Claro restricts width, the max-width is 880px which includes 3rem of padding. Therefore, I think we should just update these values to 880px to slightly increase the available space when that's allowed.

Note that we were using vw values for modal widths as part of a prototype we tested with users. Some users using a large screen were confused about the amount of information displayed on page. One of the users resized the browser window to limit the modal width and commented that it looks less confusing after resizing the screen.

I agree with @lauriii about the need to limit the with on bigger screens to prevent readability issues. In an ideal world, @bnjmnm 's suggestion to use vw to define the width would be ideal, and then limit it to a max-width that keeps the maximum 60-80 characters per line on place. But since the only option is to define some sort of max-width, I'd prioritize readability. And 880px seems right to me.

We need to manually confirm that the new width looks good on all of the instances that are being changed.

I have tested all the modals manually.Attaching the screen shots for all the cases.

Seems the manual testing was done in #11. Not going to reupload additional screenshots. The ones attached look like nothing broke.

Unless it blocks the issue overall, it could be worth including the leave preview dialog. That one is a little different as the width is calculated automatically, but that width is calculated before the buttons are moved to the lower pane. It would look a little more self assured with the buttons next to one another.

I have created a follow-up issue for #14 which can be found here 🐛 Claro: Modal dialog buttons not aligned in the "Leave preview" dialog. Fixed .Rest all the other feedbacks are addressed so moving it to NR.

I agree that the block form could use some additional space due to the vertical tabs. IMO the value @Utkarsh_33 picked looks good.

Committed a7a40c9 and pushed to 10.1.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.