Height of the spacer fieldtype is too large on small screens

[helloDanuk]

Bug description

The spacer field type leads to incorrect vertical spacing between fieldtypes on small screens.

• Viewports below 408px are fine
• Between 408px to 535px there is way too much spacing
• Between 536x to 646px there is a little too much spacing
• Form 647px everything is fine again

How to reproduce

Create a blueprint with a spacer fieldtype between some narrow fields, so that the second textfield moves to a new line. For example:

• 33% textfield
• 33% spacer
• 66% textfield

Logs

No response

Environment

Environment
Application Name: Kochort CMS
Laravel Version: 11.18.1
PHP Version: 8.3.9
Composer Version: 2.7.7
Environment: local
Debug Mode: ENABLED
URL: /
Maintenance Mode: OFF
Timezone: Europe/Zurich
Locale: de_CH

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: log
Cache: file
Database: sqlite
Logs: stack / single
Mail: smtp
Queue: sync
Session: file

Statamic
Addons: 4
Sites: 1
Stache Watcher: Enabled
Static Caching: Disabled
Version: 5.17.1 PRO

Statamic Addons
mitydigital/statamic-sticky-notes: 1.0.1
statamic/seo-pro: 6.0.3
stillat/relationships: 2.2.1
swiftmade/statamic-clear-assets: 3.0.0

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

[RyanRoberts]

I noticed this the other day, it's too big on large screens in some situations too. I gather it's because of the hidden text so I quickly fudged some CP CSS for it.

@container (min-width: 24rem) {
  .publish-tab .spacer-fieldtype .field-inner + div,
  .publish-tab .spacer-fieldtype .publish-field-label {
        display: none;
  }
}

@media screen and (max-width: 33.4375rem) {
  .publish-tab .spacer-fieldtype {
        display: none;
  }
}