No spacing between version status/autosave and render fields in the sidebar

[qbeauperin]

Link to reproduction

default versions test

To Reproduce

• Clone the Payload repo

• In the versions test, add a new field in the sidebar of the Drafts and Autosave collections, for example:

  {
      name: 'date',
      label: 'Date',
      type: 'date',
      admin: {
        position: 'sidebar',
      }
    },

• Run the test (yarn dev versions)

• Check the various collection pages and notice how there's no spacing between the version status/autosave status and the sidebar fields.

Describe the Bug

There's no spacing between the version status/autosave status and the sidebar fields.
I'd suggest adding a $baseline margin between the two.

---

Autosave (before/after):

Versions (before/after):

---

Happy to make a PR for it, but wondering about the best approach. I can see a couple options:

1. Apply margin-bottom to &:has(+ .render-fields) on both .status and .autosave: this would keep the spacing logic confined to their respective components. The issue is that :has isn't yet fully supported.
2. Apply margin-top to & + .render-fields on both .status and .autosave: alternative to 1.
3. Wrap both .status and .autosave into a common div or component: both 1. and 2. wouldn't be very future proof and adding another element in between or renaming the .render-fields div would break the fix, so given how logically tied these two elements are, I feel like the best solution would be to wrap them into their own components, and have the bottom margin applied to it.

Payload Version

1.6.32

[jacobsfletch]

@qbeauperin thank you taking the time to report on this! Much appreciated. The simplest fix here was to use CSS display: flex along with the gap: $baseline;. This is essentially the same as > *:not(:last-child) { margin-bottom: $baseline; } which also would have done the trick. Check it out a45ab8b

[qbeauperin]

Ha, much better solve indeed! 🎉

[github-actions]

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.