UI issues with block fields

[ivankyrpa]

Describe the Bug.

There are UI issues when rendering (at least) block fields in Create/Read views. Hovering over those fields helps get UI back to normal.

https://github.com/user-attachments/assets/36322a27-6eeb-415f-8cc6-6bca83688d07

Reproduction Steps

The issue has been reproduced on the payload v3.2.1.

The project was created by running npx create-payload-app@latest command.

Tests collection from attached video:

import type { CollectionConfig } from 'payload'

export const Tests: CollectionConfig = {
  slug: 'tests',
  fields: [
    {
      name: 'content',
      type: 'blocks',
      blocks: [
        {
          slug: 'text',
          fields: [
            {
              name: 'text',
              type: 'text',
            },
            {
              name: 'count',
              type: 'number',
            }
          ]
        }
      ]
    }
  ],
}

Environment Info

Binaries:
  Node: 20.17.0
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 9.10.0
Relevant Packages:
  payload: 3.2.1
  next: 15.0.0
  @payloadcms/db-postgres: 3.2.1
  @payloadcms/email-nodemailer: 3.2.1
  @payloadcms/graphql: 3.2.1
  @payloadcms/next/utilities: 3.2.1
  @payloadcms/payload-cloud: 3.2.1
  @payloadcms/richtext-lexical: 3.2.1
  @payloadcms/translations: 3.2.1
  @payloadcms/ui/shared: 3.2.1
  react: 19.0.0-rc-65a56d0e-20241020
  react-dom: 19.0.0-rc-65a56d0e-20241020
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.4.0: Wed Feb 21 21:44:54 PST 2024; root:xnu-10063.101.15~2/RELEASE_ARM64_T6030
  Available memory (MB): 18432
  Available CPU cores: 11

[lukasekulic]

I ran into the same issue.

I observed that it occurs on Safari and browsers based on Firefox, while Chrome was working fine (I did not test other Chromium-based browsers).

[ivankyrpa]

Just in case: I use Google Chrome Version 128.0.6613.120 (Official Build) (arm64). No extensions installed.

[lukasekulic]

Just in case: I use Google Chrome Version 128.0.6613.120 (Official Build) (arm64)

I used the following:

• Chrome: Version 131.0.6778.86 (Official Build) (arm64) with the uBlock Origin extension.
• Safari: Version 18.2 (20620.1.16.11.6) with the Adguard for Safari extension.
• Zen: 1.0.1-a.19 (Firefox 132.0.1) (aarch64) with the uBlock Origin, SponsorBlock for YouTube - Skip Sponsorships, React Developer Tools, Return YouTube Dislike and Bitwarden Password Manager extensions.

I just remembered that I should mention it. 🤦

I remember the Grammarly extension causing some Next issues.

[Valur]

Having the same issue after updating to 3.2 (worked fine in 3.1.1). The collapser script seems to not set correct height values on first render. This also happens in the left menu when opened in tablet screen size and the burger is clicked.

[phillipo6]

Receiving the same error on 3.2.1, reverted back to 3.1.1 for the time being