How do I move Name/State to bottom of card to stop it from being covered in my person card?

[StaleLoafOfBread]

Goal

Ultimately I want to create a person card. In that pursuit I have something I am somewhat happy with but on mobile, the main Name/State text gets covered. I am looking for ideas on how to address this. I am open to pretty much any solution that allows the info to still be presented.

I think my ideal solution would be to lower the text to the bottom of the card, separate all pieces of data with a •, and enable scrolling for the text when its longer than the card.

My person card is very complicated and messy so I made a simple example that shows the issue at hand.

Source Yaml

type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.test
name: Long Text To Show
show_last_changed: false
force_icon: true
sub_button:
  - entity: binary_sensor.test
    show_name: true
    show_state: true
    show_attribute: false
    name: aaaaaaaaaaaa
  - entity: binary_sensor.test
    show_name: true
    show_state: true
    show_attribute: false
styles: |+
  .bubble-name-container {
     transform: translateY(40px); 
     width: 100px !important;
  }

  .bubble-button-card-container {
    position: relative;
    height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
  }

rows: 2
show_state: false
show_attribute: true

Which step did you already try?

.bubble-name-container {
   transform: translateY(40px); 
   width: 100% !important;
}

.bubble-button-card-container {
  position: relative;
  height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 )) !important;
}

Problem

1. The text is covered by sub buttons
2. The text does not span the entire card

In addition to translateY I've tried adding margins or padding. I think maybe new divs need be created?

I realize with this code the text won't scroll but I believe I solved that issue in #857 (comment)

Read the documentation

• I have read the documentation

[MrBearPresident]

I guess you want to do what I made in this PR.
You can test this: #965 (comment)

[StaleLoafOfBread]

I couldn't get my browser to load your custom js. Not sure why as I replaced my file and forced refresh. Either that or I was incorrectly identifying the version it was loading. Definitely a me problem. With holiday season over I'm getting busy so I don't have time to troubleshoot. I'll just be patient and wait for that PR to merge to see if it does what I want. Thank you for the info!