Dialog width and positioning issues in Claro

Does #3191497: core/jquery.ui.dialog is missing core/jquery assets fix this?

#3191497: core/jquery.ui.dialog is missing core/jquery assets would not impact this. Were the problem surfacing here, the dialog wouldn't even open. It would only occur on pages where core/jquery.ui.dialog is literally the only jquery-using library loaded on that page.

I notice max-content is used in the #2 patch. Drupal will be supporting IE11 until 10 at the earliest, and max-content is not supported in IE11. Having to still consider IE11 is unpleasant to most of us. Fortunately, there are efforts being made to officially set an IE11 expiration date.
There may be some variables in variables.pcss.css that can be used for the max-width value. Using an existing variable defined there provides assurance that it's consistent with Claro design and may land quicker.

This is not a problem with all modals in Claro, so ideally the solution would be more specific to the use case that is causing the problem. I identified why this is happening in the add paragraph widget:

var dialog = Drupal.dialog($element, {
      autoResize: false, // Without this setting the width is fine 
      resizable: false,
      title: title,
      width: 'auto',
      paragraphsModalDelta: $modalDelta,
    });

With this in mind, the next steps should probably be:

• Identify what about dialog is different when autoResize: false, is set
• Identify why Claro doesn't cooperate well with the differences identified in the previous step
• Create a patch that targets the autoResize: false use case as much as possible. The less general the fix, the less concerns there will be of side effects, and that will help this get committed sooner.

Updating summary

I tracked this down to Claro disabling some jqueryui dialog CSS at https://git.drupalcode.org/project/drupal/-/blob/9.4.x/core/themes/claro...

  core/drupal.dialog:
    css:
      component:
        assets/vendor/jquery.ui/themes/base/dialog.css: false

If you comment out this code, the modal will look correct. I'm going to try to figure out why this was added and see if we can bring in the additional needed styles.

Proper fix attached!

The issue was that the .ui-dialog element needed to be set to position: absolute;. See this code within jQueryUI: https://git.drupalcode.org/project/drupal/-/blob/10.0.x/core/assets/vend...

This jQueryUI CSS file is removed in claro.info.yml, so we need to add this CSS into Claro.

These patches move over the relevant CSS. Patches attached for both 9.4.x and 10.0.x

Excellent detective work! Could this fix be added to core/themes/claro/css/components/dialog.pcss.css instead of the broader theme.pcss.css? That is where the style originally was until it was removed by me 😳 in #3023311: Modal dialog style update to address an issue with the close icon not centering properly in Chrome.
Fortunately, the close-button-centering in Chrome does not appear to be a problem anymore. I manually tried to reproduce the problem - different dialog configs and Zoom levels, but it seems to be addressed in the browser and we can bring back what is apparently an important bit of positioning.

Attached patch moves the additional css from components/jquery.ui/theme.pcss.css to components/dialog.pcss.css

Looks like a good fix. It brings back some default jQuery UI positioning CSS that probably shouldn't have been removed (by me) to begin with.

I imagine the change that led to this issue may have been noticed had it happened in an issue with smaller scope, but #3023311: Modal dialog style update was huge, and the change did fix an at-the-time Chrome issue.

Attached is the patch from #14 for 10.0.x

Adding credits from #3186463: Dialog resize issue which I marked as duplicate.

Committed 78b86c1 and pushed to 10.0.x. Also committed 9.x patch to 9.4.x and cherry-picked to 9.3.x because Claro is experimental and this is fixing a major bug. Thanks!