[v4] Sections and fields misalign in combined panel layouts

[nilshoerrmann]

Description

When combining sections and fields, sections get a large top margin while fields do not. This results in unbalanced layouts.

Expected behavior
Fields and section should align nicely.

Screenshots

To reproduce

Blueprint for the given example

title: Plugin
num: zero
columns:
  - width: 1/3
    sections:
      header1:
        type: fields
        fields:
          headline1:
            type: headline
            label: Beschreibung
          description:
            label: Beschreibung
            type: textarea
            size: tiny
          introduction:
            label: Einleitung
            type: textarea
            size: small
      cover:
        label: Titelbild
        type: files
        max: 1
        layout: cards
        size: huge
        image:
          ratio: 16/9
          cover: true
  - width: 1/3
    fields:
      headline2:
        type: headline
        label: Metaangaben
      category:
        label: Kategorie
        type: tags
      source:
        label: Quellplugin
        type: select
        options:
          type: query
          query: page.sources
          text: '{{ item.value }}'
          value: '{{ item.key }}'
      type:
        label: Typ
        type: select
        options:
          - MIT
          - Plus
      price:
        label: Preis
        type: number
        after: €
        when:
          type: Plus
      feature:
        label: Feature
        type: toggle
  - width: 1/3
    sections:
      header3:
        type: fields
        fields:
          headline3:
            type: headline
            label: Dokumentation
      docs:
        label: Dokumentation
        type: pages
        image: false
        templates:
          - documentation
          - textreference
      versions:
        label: Versionen
        type: pages
        image: false
        templates:
          - version

Your setup

Kirby Version
Kirby 4 beta 3 – not sure how Kirby 3 does this in comparison.

[nilshoerrmann]

Okay, there is an additional twist to the scenario: The top margin on consecutive sections reacts to the window height dynamically while the field gap does not. This is the CSS:

--columns-block-gap: clamp(var(--spacing-8),6vh,6rem);

The gap between fields is simply defined as:

--spacing-8: 2rem;

I'm not sure why I'd want to have more space on larger viewports for the one but not the other.

[distantnative]

@bastianallgeier I'd say given that we mix and match sections, fields, columns - it would be better to always use the same vertical gap size

[bastianallgeier]

It's tricky. There are situations where the gap could totally be the same, but often it's simply too narrow.

[bastianallgeier]

Sorry @nilshoerrmann, we have to move it to the next milestone. We want to release 4.0.1 today, but this is too tricky to handle it in the launch week.

[nilshoerrmann]

No worries 👍