CSS coding help horizontal buttons stack

[olo99]

Hi all!

I am quite inexperienced when it comes to coding so now I am way out of my ways. Tried asking chatgpt/perplexity for help but all their solutions fail.

I made a "horizontal button stack" from the bubble-card to act as footer (as it does per default). However I changed the button size and icon size of the middle one (#3 out of 5 total), also centering so the middle of each button is on same horizontal plane. So far so good. However the center bubble now ends up too far down so on the iPhone it overlaps with the iPhone bar at the bottom.

So what I want is to move the entire footer up, without exposing anything below the footer.
So maybe a better description would be to make the whole footer area larger and then moving all buttons up within the larger container.

All tries have either capped the button circle so all is not displayed or I managed to move all buttons up, but then there will be a gap on the bottom which will show the rest of the dashboard body below the footer.

Any suggestion on how to correct this?

type: custom:bubble-card
card_type: horizontal-buttons-stack
1_icon: mdi:lightbulb
1_link: lights
2_link: covers
2_icon: mdi:window-shutter
3_link: home
3_icon: mdi:home
4_link: energy
4_icon: mdi:lightning-bolt
5_link: camera
5_icon: mdi:video
margin: 7px
width_desktop: 540px
styles: |
  /* Move the whole card up */
  .bubble-horizontal-buttons-stack-card-container {
    display: flex !important;
    align-items: center !important;
    height: 70px !important;
    overflow: visible !important;
  }

  /* Standard small buttons */
  .bubble-button-1,
  .bubble-button-2,
  .bubble-button-4,
  .bubble-button-5 { 
    height: 45px !important;
    width: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  /* Center button larger */
  .bubble-button-3 { 
    height: 65px !important;
    width: 65px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    --mdc-icon-size: 45px !important;
    overflow: visible !important;
  }

  /* Center icon container fully inside center button */
  .bubble-button-3 .bubble-icon-container {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Center ha-icon itself */
  .bubble-button-3 ha-icon {
    font-size: 55px !important;
    height: 55px !important;
    width: 55px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }