[v4] Group field: the divider of a second group inside a collapsible is drawn through the group's label

Open Beginner friendly
  • Is something wrong?
#19,413 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
css, react
Domain
frontend

Research direction

Start with packages/ui/src/fields/Group/index.css, especially the ::before separator rules and the adjacent-group padding rule cited in the issue. Reproduce with the two consecutive groups inside a collapsible in apps/next/collections/Groups.ts and check the separator against the group title. Done means the separator sits in the gap between the groups without crossing the label.

Written by the indexing model from the issue text.

Description

area: ui Bug created-by: Contributor status: needs-triage v3
Describe the Bug

When a collapsible contains two group fields one after the other, the separator line above the second group is drawn through that group's label instead of in the gap between the groups.

.group-field--within-collapsible draws the separator with ::before at top: calc(var(--spacer-5) / 2), i.e. in the middle of the group's own padding-top: var(--spacer-5) (fields/Group/index.css#L25-L35). But .group-field + .group-field { padding-top: 0 } (#L110-L113) is more specific and removes that padding from every group that follows another group. The line stays 16px below the group's top, which is now where the title is.

Measured in the repro (second group in the collapsible):

previous group ends separator group title
as is 379px 467px 451–473px
::before { top: calc(var(--spacing-field) * -1.5) } 379px 415px 451–473px

Top-level groups aren't affected: .group-field--top-level::before sits at calc(var(--spacing-field) * -1.5), in the middle of the margin above the group (#L6-L14).

Expected: the separator sits in the gap between the two groups, like it does at the top level.

Current behaviour:

Image

With fix

Image
Link to the code that reproduces this issue

https://github.com/VeiaG/payload-4-reproductions/tree/repro-group-border-overlaps-label

Reproduction Steps

apps/next/collections/Groups.ts has many group layouts. The relevant part:

{
  type: 'collapsible',
  label: 'Collapsible with groups',
  fields: [
    { name: 'inCollapsible', type: 'group', fields: [{ name: 'a', type: 'text' }] },
    { name: 'inCollapsibleNested', type: 'group', fields: [{ name: 'b', type: 'text' }] },
  ],
}
  1. pnpm install, then pnpm dev in apps/next.
  2. Open /admin/collections/groups/create and expand Collapsible with groups.
  3. The horizontal line above the second group ("In Collapsible Nested") runs through the bottom of its title.
Which area(s) are affected?

area: ui

Environment Info
payload: 4.0.0-beta.7
@payloadcms/ui: 4.0.0-beta.7
@payloadcms/next: 4.0.0-beta.7
next: 16.4.4
Node: 24
Browser: Chrome
Dominant language
TypeScript
Stars
45.6k
Forks
4.4k
Avg merge
1d 23h
Merged PRs (30d)
237

Getting set up

Open in Codespaces

Starts the project's dev container in your browser, under your own GitHub account.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from payloadcms/payload

All issues in payloadcms/payload

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.