search

payloadcms / payload

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.
https://payloadcms.com
MIT License
25.52k stars 1.62k forks source link

Row Field > alignment issue #8390

Closed robinscholz closed 1 month ago

robinscholz commented 1 month ago

Link to reproduction

No response

Environment Info

Binaries:
  Node: 18.19.0
  npm: 10.2.3
  Yarn: 1.22.19
  pnpm: 9.5.0
Relevant Packages:
  payload: 3.0.0-beta.108
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10

Describe the Bug

image

If only one field inside a row field has a description, the remaining fields get spread.

Reproduction Steps

{
      type: 'row',
      fields: [labelField, { ...badgeField, admin: { description: 'Displayed after the label' } }],
}

Adapters and Plugins

No response

robinscholz commented 1 month ago
image

Another bug related to the description. When added the inputs don’t align in a row field anymore.

paulpopus commented 1 month ago

Closing in https://github.com/payloadcms/payload/pull/8421

We're gonna align to the top these fields and instead rely on end users to handle the alignment of the fields themselves.

I tested a few scenarios and there's no pragmatic fix that we can deploy to handle all possible edge cases, at least not with the current way that fields and the field row is setup. Maybe in the future we can make it smarter but for now I recommend devs use custom styles as needed using admin.width and admin.style as per: https://payloadcms.com/docs/beta/admin/fields (Beta) or https://payloadcms.com/docs/fields/overview#admin-config

github-actions[bot] commented 1 month ago

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