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

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)"

Do we support using Claro as a default theme.

@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.

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. We can move to RTBC
please refer Screenshot

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

Committed aa42e23 and pushed to 11.x. Thanks!