Bug in error validation error message

[Arctomachine]

Describe the Bug

Two issues:

1. Error message is not displayed on field at small screens (1024px and less)
2. Toast message for nested field error uses field names instead of labels (but field itself uses label)

Link to the code that reproduces this issue

https://github.com/Arctomachine/payload-nested-field-validation-message-bug.git

Reproduction Steps

For provided reproduction:

1. Set screen size to be below 1025px wide
2. Start server, go to admin panel, go to test collection
3. Create new document and try to save

Observe toast message giving field names instead of labels.

Make screen wider and see error message for field working as expected.

Which area(s) are affected? (Select all that apply)

area: ui

Environment Info

Binaries:
  Node: 23.7.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  payload: 3.23.0
  next: 15.1.5
  @payloadcms/db-mongodb: 3.23.0
  @payloadcms/email-nodemailer: 3.23.0
  @payloadcms/graphql: 3.23.0
  @payloadcms/next/utilities: 3.23.0
  @payloadcms/payload-cloud: 3.23.0
  @payloadcms/richtext-lexical: 3.23.0
  @payloadcms/translations: 3.23.0
  @payloadcms/ui/shared: 3.23.0
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
  Available memory (MB): 32720
  Available CPU cores: 12

[JessChowdhury]

@Arctomachine thank you for the solid reproduction! I am looking into this now.

[JessChowdhury]

Can't reproduce this on my system / browser combination. What browser are you using when you get this behavior?

Screen.Recording.2025-02-20.at.11.58.43.AM.mov

[Arctomachine]

You reproduced everything right.

1. Error message should appear on right side above field, should say "must be test"
2. Toast should say "top level group label > nested group label > field label"

[JessChowdhury]

Wow my brain must not have been turned on - I see the issue now, working on it! Thanks for the patience 😂

[JessChowdhury]

Here is what I've found:

1. The field error message is intentionally hidden on smaller screen screens (below 1024px width), it has been determined better UI to only show the error pill indicator.
2. The toast notification is failing to show labels for any parent paths. This is not related to window size, it is happening at all sizes but only happens with parent paths.

So the fixable issue here is those parent path labels, it should show labels instead of field names when possible. I have a fix in progress and will get a PR open shortly after adding tests.

[Arctomachine]

Hiding error message may be good for default validation. But what about custom validation? How can user know what is wrong with data in field?
For example, in this reproduction can you reliably know that field expects value "test" in it? Description could say it explicitly for this simple validation, but what if there were conditions? How to know which of them is violated without reading error message?

[JessChowdhury]

@Arctomachine I definitely understand the potential need but as this is intended behavior it won't be fixed as a bug. I'll get a feature request open regarding full error message output on smaller screens - it would be nice to have this available as opt-in behavior or something similar.