Multiple Design issues in the responsive view

[ChillerPerser]

Describe the Bug.

There are multiple design issues in the responsive view.

On the global header view:

Open the navigation the page gets horizontal scrollable:

The localization dropdown has no spacing:

If using a custom image on a block theres no spacing to the top:

An empty row still produces spacing - should not be visible because all child fields are hidden by condition.

Reproduction Steps

• Install the payloadcms website template from https://github.com/payloadcms/payload/tree/main/templates/website
• open the admin interface
• navigate to globals -> header

Environment Info

Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.15.0
Relevant Packages:
  payload: 3.9.0
  next: 15.1.2
  @payloadcms/db-postgres: 3.9.0
  @payloadcms/email-nodemailer: 3.9.0
  @payloadcms/graphql: 3.9.0
  @payloadcms/live-preview: 3.9.0
  @payloadcms/live-preview-react: 3.9.0
  @payloadcms/next/utilities: 3.9.0
  @payloadcms/payload-cloud: 3.9.0
  @payloadcms/plugin-form-builder: 3.9.0
  @payloadcms/plugin-nested-docs: 3.9.0
  @payloadcms/plugin-redirects: 3.9.0
  @payloadcms/plugin-search: 3.9.0
  @payloadcms/plugin-seo: 3.9.0
  @payloadcms/richtext-lexical: 3.9.0
  @payloadcms/translations: 3.9.0
  @payloadcms/ui/shared: 3.9.0
  react: 19.0.0
  react-dom: 19.0.0
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.2.0: Fri Dec  6 18:56:34 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T6020
  Available memory (MB): 16384
  Available CPU cores: 10

[Bobeta]

If I may add, I noticed that in 3.10.0 that the scroll often gets locked in iOS when the user is inside a collection. Opening & closing the sidebar makes it scrollable again.

[gkennedy87]

I believe this is related to #10135

The problem lies in the postcss.config file. Autoprefixer is being loaded before tailwind so all of the vendor prefixes aren't being added to the tailwind classes.

To fix the issue, find your postcss config file in your root director then swap the tailwind and autoprefixer order. Tailwind should come first.

[ChillerPerser]

As we are not using tailwindcss we removed the plugin.

But even with the plugin installed, the bugs still exist.

If the postcss.config.js is required for the admin backend it should be in the docs at https://payloadcms.com/docs/getting-started/installation

For us it doesnt matter which Browser we are using - Chrome, Firefox and Safari showing the same result

[zatakiya]

I am also having same issue. Have you found any solution ?
Had started from blank template and not using tailwind css. Also running on latest version (3.19.0)
Note that the issue is only specific to ios. It works perfectly in andriod.

[ChillerPerser]

No solution at the moment. (Tested with version 3.22.0)

Tested on a Mac Mini: Still broken in Chrome. Partially it works in firefox.