Combination of button-card and decluttering-card causing additional empty space

Checklist:

• [ x] I updated to the latest version available
• [ x] I cleared the cache of my browser

Release with the issue: 0.6.3

Last working release (if known): N/A

Browser and Operating System:

arch	x86_64
dev	false
docker	true
hassio	false
installation_type	Home Assistant Container
os_name	Linux
os_version	4.19.107-Unraid
python_version	3.7.7
timezone	America/Chicago
version	0.111.2
virtualenv	false

Description of problem:

When I use decluttering-card with button-card and it causes additional space after each button.

If I use only button-card then no issues.

              - type: custom:decluttering-card
                template: motion_sensors_battery_square
                variables:
                  - name: Bedroom
                  - entity: binary_sensor.wyzesense_777bfd2e
                  - entity2: sensor.tmpl_wyze_br_motion_sensor_battery

              - type: 'custom:button-card'
                template: blank_card_2px_width_style

              - type: custom:decluttering-card
                template: motion_sensors_battery_square
                variables:
                  - name: Laundry
                  - entity: binary_sensor.wyzesense_77a5f319
                  - entity2: sensor.tmpl_wyze_lr_motion_sensor_battery

Javascript errors shown in the web inspector (if applicable):

No errors

Additional information:

[RomRider]

You can add invisible buttons on the left (like 2 for eg) to reduce the overall size:

type: custom:button-card
color_type: blank-card

setting width and height should be only used in very specific case as it completely breaks when used with different devices. That’s why aspect_ratio was introduced as it respects how lovelace works

[bzellman]

I just ran against this myself.

I’ve added CSS Card Mod via HACS and then just floated the button as needed.

ex:

decluttering_templates:
  group_toggle_button:
    card:
      type: "custom:button-card"
      entity: "[[entity]]"
      show_label: false
      state_color: true
      show_name: false
      color_type: icon
      color: rgb(145, 226, 237)
      icon: mdi:power
      tap_action:
        action: toggle
      styles:
        card:
          - height: 40px
          - width: 75px
          - border-radius: 8px
      style: |
        :host{
          padding-top: 7px;
          float: right;
        }

Went from:

To This: