[FR] Flow subbuttons by row not column

[StaleLoafOfBread]

I'd like to have the ability to fill out the sub buttons by the row instead of by the columns.

Today:

Request:

I created the "request" screenshot by modifying the CSS in chrome dev tools as the following

grid-template-columns: repeat(9, 1fr);
grid-auto-flow: row;

When I do grid-template-columns: repeat(var(--column-size,1), 1fr); the new columns exceed the bounds of the button. While attempting to create this feature myself, I realized any predefined number of columns will not work as sub buttons vary in width. Trying auto-fill and auto-fit results in one column. I am far from a front end dev so I fear my own skills are at their limits in this case and hope someone with more CSS knowledge than myself if can at least give some guidance in the comments.

Yaml from screenshots:

type: custom:bubble-card
card_type: separator
name: ""
icon: none
sub_button:
  - show_icon: true
    icon: mdi:alpha-a
  - show_icon: true
    icon: mdi:alpha-b
  - show_icon: true
    icon: mdi:alpha-c
  - show_icon: true
    icon: mdi:alpha-d
  - show_icon: true
    icon: mdi:alpha-e
  - show_icon: true
    icon: mdi:alpha-f
  - show_icon: true
    icon: mdi:alpha-g
  - show_icon: true
    icon: mdi:alpha-h
  - show_icon: true
    icon: mdi:alpha-i
  - show_icon: true
    icon: mdi:alpha-j
  - show_icon: true
    icon: mdi:alpha-k
  - show_icon: true
    icon: mdi:alpha-l
  - show_icon: true
    icon: mdi:alpha-m
  - show_icon: true
    icon: mdi:alpha-n
  - show_icon: true
    icon: mdi:alpha-o
  - show_icon: true
    icon: mdi:alpha-p
  - show_icon: true
    icon: mdi:alpha-q
  - show_icon: true
    icon: mdi:alpha-r
  - show_icon: true
    icon: mdi:alpha-s
  - show_icon: true
    icon: mdi:alpha-t
  - show_icon: true
    icon: mdi:alpha-u
  - show_icon: true
    icon: mdi:alpha-v
  - show_icon: true
    icon: mdi:alpha-w
  - show_icon: true
    icon: mdi:alpha-x
  - show_icon: true
    icon: mdi:alpha-y
  - show_icon: true
    icon: mdi:alpha-z
card_layout: large
styles: |+
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-line {
    opacity: 0;
  }

modules:
  - default
grid_options:
  columns: 12
  rows: 3
show_icon: false
show_state: false
show_name: false

[StaleLoafOfBread]

I realized I could look at the mushroom chips and see how they are doing it.

Chip:

Solution:
.large .bubble-sub-button-container

display: flex
flex-flow: wrap
justify-content: flex-start

I still need to create a module or PR to add this but at least now I have the CSS properties required. If I make a PR I will likely wait till the new changes are merged over as I noticed that the cards got a major overhaul.

Leaving this open until I get an actual solution as what I posted was just done via chrome dev tools.

I added a varied widths in the test case's names as I did not want even columns.
Test yaml and results:

type: custom:bubble-card
card_type: separator
name: ""
icon: none
sub_button:
  - show_icon: true
    icon: mdi:alpha-a
  - show_icon: true
    icon: mdi:alpha-b
  - show_icon: true
    icon: mdi:alpha-c
  - show_icon: true
    icon: mdi:alpha-d
  - show_icon: true
    icon: mdi:alpha-e
  - show_icon: true
    icon: mdi:alpha-f
    name: The Letter F
    show_name: true
  - show_icon: true
    icon: mdi:alpha-g
  - show_icon: true
    icon: mdi:alpha-h
  - show_icon: true
    icon: mdi:alpha-i
  - show_icon: true
    icon: mdi:alpha-j
  - show_icon: true
    icon: mdi:alpha-k
  - show_icon: true
    icon: mdi:alpha-l
  - show_icon: true
    icon: mdi:alpha-m
    name: Letter M
    show_name: true
  - show_icon: true
    icon: mdi:alpha-n
  - show_icon: true
    icon: mdi:alpha-o
  - show_icon: true
    icon: mdi:alpha-p
  - show_icon: true
    icon: mdi:alpha-q
  - show_icon: true
    icon: mdi:alpha-r
  - show_icon: true
    icon: mdi:alpha-s
  - show_icon: true
    icon: mdi:alpha-t
  - show_icon: true
    icon: mdi:alpha-u
  - show_icon: true
    icon: mdi:alpha-v
  - show_icon: true
    icon: mdi:alpha-w
  - show_icon: true
    icon: mdi:alpha-x
  - show_icon: true
    icon: mdi:alpha-y
  - show_icon: true
    icon: mdi:alpha-z
card_layout: large
styles: |+
  .card-content {
    width: 100%;
    margin: 0 !important;
  }
  .bubble-line {
    opacity: 0;
  }

modules:
  - default
grid_options:
  columns: 12
  rows: 3
show_icon: false
show_state: false
show_name: false

I'll also likely need to stop using the separator. This screenshot was based on a beta along with my pending PRs merged in.

[StaleLoafOfBread]

${(() => {
    const element = card.querySelector(".large .bubble-sub-button-container");
    if (element) {
        element.style.display = "flex";
        element.style.flexFlow = "wrap";
        element.style.justifyContent = "flex-start";
    }
})()}

[StaleLoafOfBread]

There was no need for JS.

You can also use flex-start to align them on the left. I wanted them on the right.

type: custom:bubble-card
card_type: button
sub_button:
  - show_icon: true
    icon: mdi:alpha-a
  - show_icon: true
    icon: mdi:alpha-b
  - show_icon: true
    icon: mdi:alpha-c
  - show_icon: true
    icon: mdi:alpha-d
  - show_icon: true
    icon: mdi:alpha-e
  - show_icon: true
    icon: mdi:alpha-f
    name: The Letter F
    show_name: true
  - show_icon: true
    icon: mdi:alpha-g
  - show_icon: true
    icon: mdi:alpha-h
  - show_icon: true
    icon: mdi:alpha-i
  - show_icon: true
    icon: mdi:alpha-j
  - show_icon: true
    icon: mdi:alpha-k
  - show_icon: true
    icon: mdi:alpha-l
  - show_icon: true
    icon: mdi:alpha-m
    name: Letter M
    show_name: true
  - show_icon: true
    icon: mdi:alpha-n
  - show_icon: true
    icon: mdi:alpha-o
  - show_icon: true
    icon: mdi:alpha-p
  - show_icon: true
    icon: mdi:alpha-q
  - show_icon: true
    icon: mdi:alpha-r
  - show_icon: true
    icon: mdi:alpha-s
  - show_icon: true
    icon: mdi:alpha-t
  - show_icon: true
    icon: mdi:alpha-u
  - show_icon: true
    icon: mdi:alpha-v
  - show_icon: true
    icon: mdi:alpha-w
  - show_icon: true
    icon: mdi:alpha-x
  - show_icon: true
    icon: mdi:alpha-y
  - show_icon: true
    icon: mdi:alpha-z
card_layout: large
styles: |2-
      /* Remove background so the subbuttons look more like smaller regular buttons similar to Mushroom Chips */
      ha-card { --bubble-main-background-color: transparent}
      
      /* Wrap subbuttons like Mushroom Chips */
      .large .bubble-sub-button-container {
          display: flex;
          flex-flow: wrap;
          justify-content: flex-end;
        }

      /* Allow icons to glow outside of their container */
      .bubble-button-card-container,
      .bubble-button-card-container .bubble-container,
      .bubble-button-card-container .bubble-container .button-container {
        overflow: visible !important;
      }
grid_options:
  columns: 12
  rows: 3
show_icon: false
show_state: false
show_name: false
button_type: name
modules:
  - default

[StaleLoafOfBread]

Turned this into a module #1345