Fix extra margin on narrow date only fields

[jacksleight]

If you have a date field with time disabled in a narrow container extra margin appears below the field. This is visible when the field appears in a grid or when the field can be toggled, where it will cause a layout shift:

https://user-images.githubusercontent.com/126740/182614214-75bcd755-8780-4196-8486-0202329e7ee0.mp4

This PR fixes that by moving the margin from the date container to the time container, so it only appears when time is enabled.

[jasonvarga]

I must be missing something but there's still a jump when you toggle the field on. Just like in your gif.

[jacksleight]

Are you using a toggle field? There is still a jump when you use those as a toggle is shorter than most of the other fields anyway.

It's clearer with a button group, or inside a grid.

[jasonvarga]

Yeah I was using a toggle sorry.

But when I use a button group, I don't see a jump at all, even on the main branch.

Can you provide a blueprint that shows exactly how to see the issue?

[jacksleight]

Whoops, should have included that originally! This should do it, blueprint and accompanying entry (it's only visible when the date fields have a value).

sections:
  main:
    display: Main
    fields:
      -
        handle: title
        field:
          type: text
          required: true
          validate:
            - required
      -
        handle: switch
        field:
          options:
            'on': 'On'
            'off': 'Off'
          display: Switch
          type: button_group
          icon: button_group
          width: 25
          listable: hidden
          instructions_position: above
          visibility: visible
      -
        handle: date_field
        field:
          mode: single
          time_enabled: false
          time_seconds_enabled: false
          full_width: false
          inline: false
          columns: 1
          rows: 1
          display: 'Date Field'
          type: date
          icon: date
          width: 25
          listable: hidden
          instructions_position: above
          visibility: visible
          if:
            switch: 'equals on'
      -
        handle: text_field
        field:
          input_type: text
          antlers: false
          display: 'Text Field'
          type: text
          icon: text
          listable: hidden
          instructions_position: above
          visibility: visible
      -
        handle: grid_field_narrow
        field:
          fields:
            -
              handle: date_field
              field:
                mode: single
                time_enabled: false
                time_seconds_enabled: false
                full_width: false
                inline: false
                columns: 1
                rows: 1
                display: 'Date Field'
                type: date
                icon: date
                listable: hidden
                instructions_position: above
                visibility: visible
          mode: table
          reorderable: true
          display: 'Grid Field Narrow'
          type: grid
          icon: grid
          width: 33
          listable: hidden
          instructions_position: above
          visibility: visible
      -
        handle: grid_field_wide
        field:
          fields:
            -
              handle: date_field
              field:
                mode: single
                time_enabled: false
                time_seconds_enabled: false
                full_width: false
                inline: false
                columns: 1
                rows: 1
                display: 'Date Field'
                type: date
                icon: date
                listable: hidden
                instructions_position: above
                visibility: visible
          mode: table
          reorderable: true
          display: 'Grid Field Wide'
          type: grid
          icon: grid
          width: 66
          listable: hidden
          instructions_position: above
          visibility: visible
  sidebar:
    display: Sidebar
    fields:
      -
        handle: slug
        field:
          type: slug
          localizable: true
title: Test

---
id: f2bcba61-4c85-4984-85d8-35955e4bf7c9
blueprint: test
title: Test
updated_by: 8bd679fb-b2f2-449a-8c42-278ab0bcbc9e
updated_at: 1659602160
switch: 'on'
date_field: '2022-08-03'
grid_field_narrow:
  -
    date_field: '2022-08-04'
grid_field_wide:
  -
    date_field: '2022-08-04'
---

[jasonvarga]

Thanks! 😊