Strange Layout issue with picture-elements

I have a very strange layout issue with a view using picture-elements. It is also using the layout-card by @thomasloven but I have no idea if that is connected.

I have distilled my config down to the simplest possible and it still displays the issue of ‘cropping’ one (and only one) of the images in a stack of three. And then only if it is at the top of the stack.

Here is a small example of what happens:
image

The view is made up of three stacked picture-elements, two of which are inserted using !include. For this example to keep it simple all three picture-elements have only one element, all the same date sensor. No matter what I do the one called hall_panel_top_section (and only the one called hall_panel_top_section) is always cropped at the sides if it is at the top of the stack (and only if it is at the top)

Any help appreciated! Thanks.

Here is the config of the view:

title: Hall Panel Temp
path: hall_panel_temp
background: darkslategrey
panel: true
cards:
  - type: custom:layout-card
    layout: horizontal
    column_num: 1
    max_columns: 1
    max_width: 100%
    cards:
      
      #================
      #=== TOP Section 
      #================
      - !include /config/lovelace/hall_panel/hall_panel_top_section_temp.yaml                

      #=================
      #=== MAIN Section
      #================= 
      - type: horizontal-stack
        cards:
          - type: picture-elements
            image: /local/panel/main_section.svg
            elements:
              #=========
              #=== Date
              #=========
              - type: state-label
                entity: sensor.long_form_date
                style:
                  position: absolute
                  top: 50%
                  left: 50%
                  color: "#A1A1A1"
                  font-family: Quicksand
                  font-size: 38px
                  pointer-events: none

      #===================
      #=== BOTTOM Section 
      #===================
      - !include /config/lovelace/hall_panel/hall_panel_bottom_section_temp.yaml 

Here is the ‘top_section’ !include

type: horizontal-stack
cards:
  - type: picture-elements
    image: /local/panel/top_section.svg
    elements:
      #=========
      #=== Date
      #=========
      - type: state-label
        entity: sensor.long_form_date
        style:
          position: absolute
          top: 50%
          left: 50%
          color: "#A1A1A1"
          font-family: Quicksand
          font-size: 38px
          pointer-events: none

And here is the ‘bottom_section’ !include

type: horizontal-stack
cards:
  - type: picture-elements
    image: /local/panel/bottom_section.svg
    elements:

      #=========
      #=== Date
      #=========
      - type: state-label
        entity: sensor.long_form_date
        style:
          position: absolute
          top: 50%
          left: 50%
          color: "#A1A1A1"
          font-family: Quicksand
          font-size: 38px
          pointer-events: none

Here it is showing the cropped panel

Here is an example of it not cropped

Use dev tools and see if that’s the edge of the element.

The edge of the element includes the ‘cropping bars’.

Here is how it looks when it is cropped.
image

image

And here is how it looks swapping the order of the top two.
image

image