[Bug] Top-level group/tabs fields are misaligned on the right (content + separator) vs sibling fields

Describe the Bug.

Top-level group and tabs fields line up with sibling top-level fields on the left, but are misaligned on the right: their content is inset more (narrower) than sibling fields (e.g. a top-level text field), and their separator (the border) stops short of the right edge. It shows on wide viewports and is most obvious in Live Preview — the narrowed editor column makes the separator stop well before the right edge.

See screenshot: the "Eyebrow" field (inside a top-level group) is visibly narrower than the "Title" field above it.

Important precondition: this only happens when the document has a non-empty sidebar — i.e. at least one field with admin.position: 'sidebar' (which is the common case: slug, status, drafts, etc.). With an empty sidebar, Payload's :has(… .render-fields:empty) rule sets --main-field-margin: initial and everything lines up, so the bug does not reproduce.

Root cause (packages/ui/src/elements/DocumentFields/index.scss): a top-level group/tabs has a symmetric padding-inline: var(--gutter-h). On the left, margin-left: calc(var(--gutter-h) * -1) cancels that padding, so content and border line up. On the right, two values don't track --gutter-h:

1. --main-gutter-h-right is calc(var(--base) * 2) in the base --has-sidebar state, whereas --main-gutter-h-left is var(--gutter-h) — and Payload's own responsive variants already use var(--gutter-h) on the right. So the right gutter is inconsistent with the left (and with the other breakpoints).
2. --main-field-margin (the margin-right applied to > .group-field / > .tabs-field) is a constant calc(var(--base) * -2) that does not follow --gutter-h, unlike margin-left. As soon as --gutter-h ≠ 2 × --base (wide viewport, Live Preview…) it no longer cancels the padding → misalignment. (Payload already uses calc(var(--gutter-h) * -1) inside its @include mid-break, which confirms the constant is the anomaly.)

Suggested fix — mirror the right on the left, with values that follow --gutter-h (in .document-fields--has-sidebar):

--main-gutter-h-right: var(--gutter-h);            /* like --main-gutter-h-left and the responsive variants */
--main-field-margin:   calc(var(--gutter-h) * -1); /* mirror of margin-left, instead of the -2×base constant */

The margin-right of > .group-field / > .tabs-field already reads var(--main-field-margin), so it picks up the corrected value → content and separator align on the right, in the side-by-side layout as well as in Live Preview.

Reproduction Steps

1. npx create-payload-app (any template).
2. On a collection, add: a top-level group field (with a few subfields), a top-level text field next to it for comparison, and at least one field with admin.position: 'sidebar' (so the sidebar is not empty — this is required, see precondition above). Enable admin.livePreview.
3. Open a document on a wide viewport: the group's content is narrower on the right than the text field, and its separator does not reach the right edge (where the sidebar divider / --main-border is).
4. Enable Live Preview: the gap becomes obvious (the separator stops well before the edge). Shrinking the window to a "mobile" width (< 1024px) lines it up again — confirming the behavior depends on the viewport width (while the layout switch depends on the column width).
5. Remove the sidebar field (empty sidebar) → the misalignment disappears (--main-field-margin: initial), confirming the sidebar is the trigger.

Environment Info

Payload: 3.87.1
Node.js: 16.3.0
Next.js: 22.16

Start in packages/ui/src/elements/DocumentFields/index.scss and reproduce the layout with a non-empty sidebar, a top-level group or tabs field, and Live Preview at a wide viewport. Check the gutter and field-margin variables described in the issue, then verify that content and separators align with sibling fields across side-by-side and Live Preview layouts.