Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.Problem/Motivation
For example, there are several instances in core where 700px is hard coded for the width of dialogs.
'data-dialog-options' => Json::encode([
'width' => 700,
]),
"Setting a fixed 700 pixel width means this could appear unnecessarily narrow on larger screens. Although many of the form elements seem to look just the same, it scrunches up textareas and WYSIWYG fields a little awkwardly. A percentage would be better but it doesn't look like we could pass a non-px value to the jQuery settings: https://api.jqueryui.com/dialog/#option-width"
These may have been sufficient for smaller displays and the now-removed Seven theme which had smaller form elements. Uses should be evaluated with the awareness wider displays are more commonly used, and that Claro is chunkier.
Steps to reproduce
Proposed resolution
Remaining tasks
User interface changes
API changes
Data model changes
Release notes snippet
| Comment | File | Size | Author |
|---|---|---|---|
| #16 | Screen Shot 2023-05-10 at 11.04.22.png | 91.82 KB | lauriii |
| #14 | leave-preview.png | 59.66 KB | bnjmnm |
| #11 | ContentModerationConfigForm.png | 354.59 KB | utkarsh_33 |
| #11 | ConfigSync form.png | 375.47 KB | utkarsh_33 |
| #11 | CKEditor test modal.png | 235.16 KB | utkarsh_33 |
Issue fork drupal-3342816
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes
Comments
Comment #2
hooroomooComment #3
bnjmnmComment #4
bnjmnmIt looks like jQuery UI dialog can handle % or vw widths?
for example these will both work:
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:Comment #5
lauriiiHow 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.
Comment #6
ckrinaI 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
vwto define the width would be ideal, and then limit it to amax-widththat 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.Comment #9
utkarsh_33 commentedComment #10
lauriiiWe need to manually confirm that the new width looks good on all of the instances that are being changed.
Comment #11
utkarsh_33 commentedI have tested all the modals manually.Attaching the screen shots for all the cases.
Comment #12
smustgrave commentedSeems the manual testing was done in #11. Not going to reupload additional screenshots. The ones attached look like nothing broke.
Comment #13
bnjmnmComment #14
bnjmnmUnless 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.
Comment #15
utkarsh_33 commentedI have created a follow-up issue for #14 which can be found here.Rest all the other feedbacks are addressed so moving it to NR.
Comment #16
lauriiiI agree that the block form could use some additional space due to the vertical tabs. IMO the value @Utkarsh_33 picked looks good.
Comment #18
ckrinaCommitted a7a40c9 and pushed to 10.1.x. Thanks!