Mobile resizing sub-button icon / state should hide (to prioritise the main state)

[dopeytree]

For any feature request you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/feature-requests

For any question you can open a new discussion here:
https://github.com/Clooos/Bubble-Card/discussions/categories/q-a

Describe the bug
Cannot read state on mobile due to sizing issue.

To Reproduce
Steps to reproduce the behavior:

1. Go to - custom bubble card
2. Click on -button, add an power measure watt entity with icon, name & state (better if a power monitor/smart plug)
3. Scroll down to -add sub button, entity for monthly usage in kWh. Icon and state.
4. See error sizing on mobile.

Expected behavior
Expected to resize to fit on phone.
Or
Have an option to select something like hide icon or state if space too small.

Ideal world:
On mobile I would have the KwH state hide and just show the icon so a user can click to view monthly history.
However the main energy state in watts MUST be shown. Don't need the full name but need an icon and the state as a minimum then an icon for the sub-button.

Screenshots
If applicable, add screenshots to help explain your problem.

Mobile (iphone 15 pro the larger screen one)

Desktop

YAML
If applicable, add any relevant YAML code.

type: horizontal-stack
cards:
  - type: vertical-stack
    cards:
      - type: custom:bubble-card
        card_type: separator
        name: Power
        sub_button:
          - entity: sensor.smart_meter_electricity_import_this_month
            show_state: true
        styles: |-
          .bubble-sub-button-1 {
              background-color: black !important;
            }
      - type: horizontal-stack
        cards:
          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.house_net_energy_usage_now
                name: Miscellaneous
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.house_net_energy_usage_month
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(10, 11, 0, ) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(20,100,100,0.1) !important;
                    }
              - type: custom:bubble-card
                card_type: separator
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.11_smart_plug_current_power
                name: Freezer
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.11_smart_plug_month_energy
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(70, 130, 180) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(0,90,190,0.2) !important;
                    }
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.10_smart_plug_current_power
                name: Fridge
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.10_smart_plug_month_energy
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(80, 130, 180) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(0,90,190,0.2) !important;
                    }
                force_icon: false
                scrolling_effect: true
                show_name: true
                show_state: true
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.8_smart_plug_current_power
                name: Hen's Fridge
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.8_smart_plug_month_energy
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(70, 130, 180) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(0,90,190,0.2) !important;
                    }
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.3_smart_plug_current_power
                name: Ed's Fridge
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.3_smart_plug_month_energy
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(70, 130, 180) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(0,90,190,0.2) !important;
                    }
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.14_smart_plug_current_power
                name: Internet CCTV
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.14_smart_plug_month_energy
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: green !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(12,120,50,0.2) !important;
                    }
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.1_smart_plug_current_power
                name: Unraid Server
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.1_smart_plug_month_energy
                    show_state: true
                styles: |2-

                    .bubble-icon {
                      color: green !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(12,120,50,0.2) !important;
                    }
          - type: vertical-stack
            cards:
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.house_energy_plugs_usage_now
                name: All Plugs
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.house_energy_plugs_usage_month
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(10, 11, 0,) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(20,100,100,0.1) !important;
                    }
              - type: custom:bubble-card
                card_type: separator
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.7_smart_plug_current_power
                name: Kettle
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.7_smart_plug_month_energy
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(220, 20, 60) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(120,10,10,0.2) !important;
                    }
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.4_smart_plug_current_power
                name: Air Fryer
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.4_smart_plug_month_energy
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(220, 20, 60) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(120,10,10,0.2) !important;
                    }
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.smart_plug_19_current_power
                name: Dehumidifier
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.smart_plug_19_month_energy
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(169, 169, 169) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(169,169,169,0.2) !important;
                    }
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.12_smart_plug_current_power
                name: Washing Machine
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.12_smart_plug_month_energy
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(169, 169, 169) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(169,169,169,0.2) !important;
                    }
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.9_smart_plug_current_power
                name: Dishwasher
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.9_smart_plug_month_energy
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(169, 169, 169) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgba(169,169,169,0.2) !important;
                    }
              - type: custom:bubble-card
                card_type: button
                button_type: state
                entity: sensor.13_smart_plug_current_power
                name: Lounge TV
                sub_button:
                  - icon: mdi:chart-line
                    entity: sensor.13_smart_plug_month_energy
                    show_state: true
                    show_icon: true
                styles: |2-

                    .bubble-icon {
                      color: rgb(255, 215, 0) !important;
                    }

                   
                    .bubble-sub-button-1 {
                      background-color: black !important;
                    }

                    
                    .bubble-button-card-container {
                      background: rgb(255, 215, 100, 0.2) !important;
                    }

Informations (please complete the following information):

• OS: [e.g. iOS] - MacOS sequoia 15.1 / iOS 18.1
• Browser/App: [e.g. chrome, safari] - Safari Latest
• Bubble Card version: [e.g. 2.0.4] - 2.2.4
• Home Assistant version: [e.g. 2024.6.4] - 2024.11.1

Additional context
Awesome work.

Thank you! 🍻

[MrBearPresident]

Conditional sub-buttons is comming in next release.
So this should already help with this.

Conditional icon is an option that can be explored.

[MrBearPresident]

@dopeytree
Have you tried the newest bèta?
Can conditional sub-buttons work for you?

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.