SIGN IN SIGN UP
payloadcms / payload UNCLAIMED

Payload is the open-source, fullstack Next.js framework, giving you instant backend superpowers. Get a full TypeScript backend and admin panel instantly. Use Payload as a headless CMS or for building powerful applications.

0 0 119 TypeScript

fix(ui): add border between live preview window and document fields (#16793)

## What changed

Adds a visual border separating the Live Preview window from the
document fields panel, and fixes two edge cases where the border was
either missing or doubled.

## Why

### Case 1: Collections with sidebar fields — border appeared fine (but
for the wrong reason)

When a collection has sidebar fields, `document-fields--has-sidebar`
sets `--main-border` on `document-fields__edit`, which draws a
`border-right` between the main fields and the sidebar. This border
happened to visually separate the document from the live preview window
too — but only because the layout stacked them adjacently. It wasn't an
intentional live-preview border.

### Case 2: Collections without sidebar fields — border was missing

When there are no sidebar fields (or the sidebar fields are empty),
`--main-border` resolves to `none`, so no divider was drawn at all. When
live preview was active, the iframe just appeared flush against the
document fields with no visual separation.

### Case 3: With sidebar fields + live preview active — double border

When live preview is active, `forceSidebarWrap` is set on
`DocumentFields`, which applies the
`.document-fields--force-sidebar-wrap` class. However, `--main-border`
was still in effect from `--has-sidebar`, meaning the sidebar's
`border-right` and any new live-preview border would both render —
creating a 2px thick border.

### Case 4: Expanded (full-width) live preview — border next to nav

When the live preview is expanded to 100% width, its `border-left` sat
right next to the nav's `border-right`, producing a doubled border there
too.

## Fix

- Added `border-left: var(--stroke-width-small) solid
var(--color-border)` to `.live-preview-window--is-live-previewing` —
this is the single source of truth for the live-preview divider.
- Added `--main-border: none` to `.document-fields--force-sidebar-wrap`
(which is only applied when live preview is active) to prevent the
sidebar's `border-right` from doubling up.
- Added `border-left: none` to `.live-preview-window--is-expanded` so
the border disappears when expanded to full width (where it would clash
with the nav border).

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
J
Jarrod Flesch committed
48335e114cf8401375ab697599edba55531f5229
Parent: bb110a6
Committed by GitHub <noreply@github.com> on 5/29/2026, 5:20:44 PM