Help with Minimalist UI Custom Card override button-card's grid-area

Configuration Frontend
1

I am working on a custom component for Minimalist UI. I have it mostly working but the spacing is a little weird on some screen sizes. Ive found that (in dev tools) I remove (or change to unset) the grid-area css style the layout is what I would expect. The problem is I can not figure out how to change the grid-area (outside of dev tools).

Looking in the button card code I found out why it always gets set. It applies all the css styles that are specified in the yaml and then at the end of the styles object sets grid-area to the id of the div. Ive tried lots of things and cant figure out how to override it.

Here is my custom card that I am having the issue on. The custom_field “lights” at line 48 is where the problem resides. With the default grid layout on bigger screens and/ or entities with short names the controls on the bottom for the lights have a big empty section on the left before they start.

Any help is appreciated in advance.

2

With help from @basbrus in the Minimalist thread the issue is fixed now. I ended up changing the style to

styles:
          card:
            - padding-bottom: "0px"
          custom_fields:
            lights:
              - width: "100%"
          grid:
            - grid-template-areas: "lights"
            - display: "flex"
            - justify-content: "start"

The github has been updated to reflect these changes with release 1.0.1.