Claro: Modal dialog buttons not aligned in the "Leave preview" dialog.

PFA the screenshot with the css changes applied.

working on this

So if claro is enabled as the default theme the preview page doesn't function at all.

If olivero is then the buttons are aligned fine.

So not seeing this issue, think it could use additional steps.

Added related issue "Olivero: Modal dialog buttons not aligned (for example, in the ""Leave preview"" dialog)" 🐛 Olivero: Modal dialog buttons not aligned (for example, in the "Leave preview" dialog) Fixed

Do we support using Claro as a default theme.

Hi #smustgrave, Yes If we set the Claro theme as the default, it appears to be causing an issue as described. However, when using the Olivero theme, everything seems to be working fine.

Tested Drupal Version: 10.1.x-dev
The steps to reproduce is the same as mention above
1) Go to edit node
2) Click on Preview button at the bottom.
3) Click on logo or website title on Navbar.

I reviewed the Mr #3959,
patch applied successfully and solved the issue

before

after

but there a little more space to improve the code like
1. we can write more logical and nested css for block

 .ui-dialog-buttonpane .ui-dialog-buttonset {
+  display: flex;
+  float: none;
+  gap: 0.7rem;
   justify-content: flex-end;
-  margin: 0 var(--space-s);
+  margin-top: 10px;
+  margin-right: 10px;
+  margin-bottom: 10px;
+  padding-inline-end: 5px;
 }
and
+.ui-dialog .ui-dialog-buttonpane button {
+  margin: 0;
+}

2. we can remove float: none as there is no use of this.

I think the approach proposed by @Ben seems to be more efficient than it's counter CSS workaround implemented in 3359012-claro-modal-dialog.It recalculates the width of the ui-dialog box based on the combined width of the buttons and then assign the width to the ui-dialog box so that the buttons fit inline with each other.I have attached the screenshots for further refferences.

Utkarsh_33 → closed merge request !3959

Closing the other MR and Marking it as RTBC as everything seems to work as intended.I have also attached the screen shots for the same in #11.

Added comment on the MR.

Confirmed the bug is fixed still.

Think it's good to get these things fixed but can't imagine people using claro for previewing. The preview page has many issues in claro.

I'm not sure about 42 additional lines of code for what @smustgrave points out in #18 is a pretty unlikely edge case. This may be the result of something I was trying out in an MR earlier but I think I may have been overcomplicating it. There have been scenarios where the dialog width calculation is confused by the moving of the submit buttons, but it doesn't seem to be a problem here.

I did a quick test of adding a single additional line of CSS and it seemed to work, but perhaps I missed something earlier in the thread eliminated that as a solution? Or maybe I just poisoned the well with convoluted JS?

.ui-dialog-buttonpane .ui-dialog-buttonset {
  display: flex; /* Was this already tried and ruled out? */
  justify-content: flex-end;
  margin: 0 var(--space-s);
}

Removed the JS, and added display: flex.

Verified the bug is still fixed doing same tests as before.

Removing the margin creates a regression to some other dialog forms:

Only adding display: flex causes the Leave preview text on the button to break into two lines. I applied the CSS from comment #9 and it looks good on the preview and other modal dialogs i looked at.

@Utkarsh_33 I applied the CSS from comment #9 and it working or looks fine on the preview and other modal dialogs. please refer Screenshot
Before

/Users/preeti.chawla/Desktop/Screenshot 2023-07-10 at 3.59.57 PM.png

After

/Users/preeti.chawla/Desktop/Screenshot 2023-07-10 at 3.59.45 PM.png

Tested the view dialog mentioned in #22 and don't see any regression

lauriii → closed merge request !3980

Committed aa42e23 and pushed to 11.x. Thanks!

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