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

Not sure if #10.2 has been addressed either.

Will need screenshots since .css file changed.

I have added before/after patch screenshots for reference:

Before patch

After patch

Only nit picky maybe could be
.layout-region--node-footer .layout-region__content
but don't think that will hold up the issue.

Unfortunately, this introduces some regressions with RTL.

Before:

After:

Gaurav-drupal → made their first commit to this issue’s fork.

I have fixed the RTL specific styling. please review

Confirmed the issue on #25 has been addressed.

There's no margin on RTL 🤔

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);
  }
}

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