Aqara outlet Button Card attemp

I have a few Aqara outlets I am using to control loads and monitor energy consumption. I can turn them on and off via a switch card I have with all my other switches.
This is the one:
image

I am attempting to make a nice front end card for the switch I can use simply, so create a view dedicated to those switches so I can configure all of them if needed from one spot.
I went down the path of the Button-card (love that card), and creating a template for it so it is simple to deploy.
I believe I got the functionality where I want it with a few exceptions:

  1. Formatting: The size and relative placement of the items on the card are off, and do not scale with the button size.
  2. The bottom 3 entities are showing up as entities (which is how I have them listed) but is there a way to make them appear as 3 smaller buttons one next to the other?) like a glance card? Is the only way a glance card or is there a nice way of presenting 2 switches and a status at the bottom (horizontally)

Here is my template code if anyone is looking for something similar, and the yaml code for adding the button card to a view or other:
Config code:

- type: custom:button-card
    template: smart_plug_aqara
    entity: switch.traffic_light_outlet
    variables:
      var_name: "Plug AV"

You only need to add the entity name of the primary switch. All other entities are retrieved from it.

smart_plug_aqara:
  triggers_update: all
  name: "[[[ return variables.var_name ]]]"
  aspect_ratio: 1/1
  styles:
    img_cell:
      - justify-content: start
      - align-items: start
      - margin: none
    card:
      - padding: 0.2em
      - box-shadow: >
          [[[
            if (entity.state == 'on') return '0px 0px 3px 3px lime';
            else return '0px 0px 3px 3px red';
          ]]]
      - text-shadow: 0px 0px 5px black
      - color: ivory
      - font-size: 1em
      - text-transform: capitalize
    name:
      - font-weight: bold
      - font-size: 1em
      - color: white
      - align-self: middle
      - justify-self: start
      - padding-bottom: 4px
      - overflow: visible
    icon:
      - color: >
          [[[
            if (entity.state == 'on') return 'lime';
            else return 'red';
          ]]]
      - width: 50%
      - margin-top: 0%
    custom_fields:
      gauge:
        - '--ha-card-background': 'rgba(0, 0, 0, 0.0)'
      bar:
        - margin-top: '-5px'
        - '--ha-card-background': 'rgba(0, 0, 0, 0.0)'
      graph:
        - '--ha-card-background': 'rgba(0, 0, 0, 0.0)'
      diag:
        - '--ha-card-background': 'rgba(0, 0, 0, 0.0)'
    grid:
      - grid-template-areas: |
          "i n n" 
          "i gauge gauge" 
          "graph graph graph" 
          "bar bar bar" 
          "diag diag diag"
      - grid-template-columns: 1fr 1fr 1fr
      - grid-template-rows: 1fr 1fr 1fr 1fr 1fr
  custom_fields:
    gauge:
      card:
        style: |-
          .type-gauge {
            padding: 0%;
          }
          div.name {
            font-size: 0px;
          }
        type: gauge
        entity: |
          [[[
            if (states[entity.entity_id].state != 'unavailable') {
            var ent = entity.entity_id
            var ent_p = ent.replace("switch", "sensor")
            ent_p += "_energy"
            return `${[ent_p]}`}
          ]]]
        min: 0
        max: 1875
        severity:
          green: 0
          yellow: 500
          red: 1400
    graph:
      card:
        type: 'custom:mini-graph-card'
        entities:
          - entity: |
              [[[
                if (states[entity.entity_id].state != 'unavailable') {
                var ent = entity.entity_id
                var ent_p = ent.replace("switch", "sensor")
                ent_p += "_power"
                return `${[ent_p]}`}
              ]]]
        group: true
        points_per_hour: 60
        line_color: red
        line_width: 5
        hours_to_show: 24
        update_interval: 10
        show:
          name: false
          icon: false
          state: false
          points: false
          labels: false
          fill: false
    bar:
      card:
        style: |-
          bar-card-currentbar, bar-card-backgroundbar{
            border-radius: 3px;
          }
          .card-content {
            text-align: start;
            padding: 0.2em
          }
          bar-card-name, bar-card-value {
            overflow: visible;
            font-size: 0.7em
            font-weight: bold;
          }
          bar-card-value {
            margin-right: auto;
            font-size: 0.7em
            font-weight: bold;
          }
        height: 5
        animation:
          state: 'on'
          speed: 1
        type: 'custom:bar-card'
        entities:
          - entity: |
              [[[
                if (states[entity.entity_id].state != 'unavailable') {
                var ent = entity.entity_id
                var ent_s = ent.replace("switch", "sensor")
                ent_s += "_device_temperature"
                return `${[ent_s]}`}
              ]]]
            name: temp.
            icon: 'mdi:thermometer'
            min: 0
            max: 300
            severity:
              - from: 0
                to: 210
                color: '#0000ff'
              - from: 210
                to: 220
                color: '#00ffff'
              - from: 220
                to: 240
                color: '#00ff00'
              - from: 240
                to: 250
                color: '#ffa500'
              - from: 250
                to: 260
                color: '#ff00ff'
              - from: 260
                to: 300
                color: '#ff0000'
        positions:
          icon: 'inside'
          name: inside
          indicator: 'off'
    diag:
      card:
        type: entities
        show_name: false
        entities:
          - entity: |
              [[[
                if (states[entity.entity_id].state != 'unavailable') {
                var ent = entity.entity_id
                ent += "_led_disabled_night"
                return `${[ent]}`}
              ]]]
          - entity: |
              [[[
                if (states[entity.entity_id].state != 'unavailable') {
                var ent = entity.entity_id
                ent += "_power_outage_memory"
                return `${[ent]}`}
              ]]]
          - entity: |
              [[[
                if (states[entity.entity_id].state != 'unavailable') {
                var ent = entity.entity_id
                var ent_p = ent.replace("switch", "update")
                return `${[ent_p]}`}
              ]]]
  hold_action:
    action: toggle
  tap_action:
    service: browser_mod.popup
    data:
      deviceID: this
      hide_header: false
      title: Details
      size: normal
      content:
        type: vertical-stack
        cards:
          - type: entities
            entities: |
              [[[
                var ent = entity.entity_id
                var ent_power = ent.replace("switch", "sensor")
                var ent_temp = ent.replace("switch", "sensor")
                var ent_energy = ent.replace("switch", "sensor")
                ent_power += "_power"
                ent_temp += "_device_temperature"
                ent_energy += "_energy"
                return [ent,ent_power,ent_temp,ent_energy]
              ]]]
          - type: entities
            title: |
              [[[
                return [entity.attributes.friendly_name]
              ]]]

So as a general question, how to make button size with its content scale with window size or placement of the button-card? I want everything to scale up or down (including font, icons, etc).

What’s the best option for creating the 3 buttons at the end as horizontal placement with only icon and name. Is it 3 button cards within the button card so I can apply the green halo formatting? Or is there something better?

Here is what it looks like now (not too pretty yet…)
image

Once I get those figured out, I will work on making the temp and gauge charts nicer with color gradients and publish.