Refactor Claro's "node form" layout to not use floats

This has an RTL issue where the sidebar is on the right hand side (should be on the left).

Also, I talked to @lauriii (core frontend framework manager), and he said if we're doing grid, we can do Drupal 10 only. There's little benefit to doing this in D9, as it works fine, and just adds complexity (we should be removing complexity). Moving the version to D10.

Some code comments below (tbh, I think it's a bit more complex than is needed).

1. +++ b/core/themes/claro/css/layout/node-add.pcss.css
   @@ -57,6 +57,64 @@
   +      grid-template-areas:
   

   Not sure if we need to use grid-areas here. It makes things a bit complicated.

   IMO grid areas would make sense if we're using them theme-wide, but that's not the case here.

2. +++ b/core/themes/claro/css/layout/node-add.pcss.css
   @@ -57,6 +57,64 @@
   +    [dir="rtl"] .layout-node-form {
   

   Grid automatically handles RTL. No need for specific styles.

@Sakthivel M Thanks for the patch

A couple notes:
1) If you're basing your patch off of another, please include an interdiff, so reviewers can easily see the differences.
2) Since we're doing a Drupal 10 patch (where all browsers support Grid), there's no need for the @supports rule.

Also, since this file is PostCSS, feel free to use modern syntax that we now have in core such has nesting, CSS logical properties, etc.

Thanks for the patch.

Still failing CI, and my feedback from #10 doesn't seem to be addressed.

The feedback from my comments in #10 are not yet addressed, and there's still floats used for layouts in the patch.

Uploading this as a patch, since it's a radical departure from the MR above.

IMO, this CSS could be radically simplified.

Because there's multiple rows, it's much easier to use grid than flex
Both grid and flex have built in RTL support, we should make use of that using the gap property

I ended up refactoring this down to 32 lines of CSS (from 80 in the MR) and IMHO is easier to understand. PCSS is below (for better readability) and patch is attached.

/**
 * Layout overrides for node add/edit form.
 */
.layout-region {
  box-sizing: border-box;
}

.layout-region--node-footer .layout-region__content {
  margin-top: var(--space-l);
}

/**
 * Move to two column layout at wider widths.
 */
@media (min-width: 61rem) {
  .layout-node-form {
    display: grid;
    grid-template-columns: 3fr minmax(360px, 1fr);
    gap: var(--space-l);
  }

  .layout-region--node-main,
  .layout-region--node-footer {
    margin-inline: auto;
    width: min(832px, 100%);
  }

  /* Push sidebar down to horizontal align with form section. */
  .layout-region--node-secondary {
    margin-block-start: var(--space-l);
  }
}