Max width on iOS companion app does not match web version....

[MajorAutomation]

Thanks for your hard work on this project, it is awesome.

I am having an issue on the companion app that is not scaling the tab headers down as per the web interface.

Here is my code:

styles: '--mdc-theme-primary': orange '--mdc-tab-text-label-color-default': white '--mdc-typography-button-font-size': 11px '--mdc-tab-height': 24px '--mdc-tab-horizontal-padding': 0px attributes: isMinWidthIndicator: true minWidth: true isFadingIndicator: true options: {}

This is what the web interface looks like (perfect)

But the mobile companion app does not scale the names across the top correctly? Is there a fix for this as all headers should fit nicely, but I am missing the 5th entity tab name and you have to scroll? I have tried taking the font size down to 6px and there is more than ample room to fit the last entity?

Thanks

[kinghat]

i dont have an ios device to test the apps webview on but it looks to be functioning properly. you have enough tabs that it is going to shrink them as small as possible to fit as many as possible. you can see this if you comment out 3 of the tabs and watch them fill the tab bar. like this:

its because of the smaller screen size. your tabs that are not showing are just out of view and you should be able to scroll over to see them. its not very intuitive, and to fix that i will be adding scroll arrows for when the tabs overflow. does this make sense?

[MajorAutomation]

There are huge gaps between the tabs though (Dining ->Living ->Bedroom), I have set padding to 0px, if it can't be done, I guess I have to scroll. Thanks for the quick response

[kinghat]

There are huge gaps between the tabs though (Dining ->Living ->Bedroom), I have set padding to 0px, if it can't be done, I guess I have to scroll. Thanks for the quick response

oh, um you shouldnt need quotes on your keys. is everything indented properly? this works for me:

styles:
  --mdc-tab-horizontal-padding: 0px

[MajorAutomation]

HA seems to be adding these quotes, I remove them and they come back, the colour options appear to be working ok with quotes as does the font size and tab height. They don't seem to get any closer for me.

Here is all my code....

type: custom:tabbed-card styles: '--mdc-theme-primary': orange '--mdc-tab-text-label-color-default': white '--mdc-typography-button-font-size': 9px '--mdc-tab-height': 24px '--mdc-tab-horizontal-padding': 0px attributes: isMinWidthIndicator: true minWidth: true isFadingIndicator: true options: {} tabs:

• card: type: custom:mushroom-climate-card entity: climate.aircon_1 name: Dining Room collapsible_controls: false layout: horizontal use_entity_picture: true tap_action: action: more-info hvac_modes:
  • 'off'
  • fan_only
  • heat
  • cool attributes: label: Dining
• card: type: custom:mushroom-climate-card entity: climate.aircon_2 collapsible_controls: false layout: horizontal use_entity_picture: true tap_action: action: more-info hvac_modes:
  • 'off'
  • fan_only
  • heat
  • cool attributes: label: Living
• card: type: custom:mushroom-climate-card entity: climate.aircon_3 collapsible_controls: false layout: horizontal use_entity_picture: true tap_action: action: more-info hvac_modes:
  • 'off'
  • fan_only
  • heat
  • cool attributes: label: Bedroom
• card: type: custom:mushroom-climate-card entity: climate.aircon_4 collapsible_controls: false layout: horizontal use_entity_picture: true tap_action: action: more-info hvac_modes:
  • 'off'
  • fan_only
  • heat
  • cool attributes: label: Tyler
• card: type: custom:mushroom-climate-card entity: climate.aircon_5 collapsible_controls: false layout: horizontal use_entity_picture: true tap_action: action: more-info hvac_modes:
  • 'off'
  • fan_only
  • heat
  • cool attributes: label: Jaxson

[kinghat]

where are you entering and copying this config from?

[kinghat]

where are you entering and copying this config from?

regardless, your yaml config needs proper indentation to be accurate. this is correct formatting and works:

type: custom:tabbed-card
attributes:
  minWidth: true
  isMinWidthIndicator: true
styles:
  '--mdc-tab-horizontal-padding': 0px
tabs:
  - card:
      ...
    attributes:
      ...

[MajorAutomation]

This is the layout of the code, looks ok and passed YAML checker...

https://pastebin.com/B5nBmtvK

[kinghat]

This is the layout of the code, looks ok and passed YAML checker...

https://pastebin.com/B5nBmtvK

weird. i dont have a ios device to check that. can you add this config and see if it has the same issue?

type: custom:tabbed-card
attributes:
  minWidth: true
  isMinWidthIndicator: true
styles:
  '--mdc-tab-horizontal-padding': 0px
tabs:
  - card:
      type: entity
      entity: sun.sun
    attributes:
      icon: mdi:pause
      label: Pause
  - card:
      type: entity
      entity: sun.sun
    attributes:
      label: Play
      icon: mdi:play
  - card:
      type: entity
      entity: sun.sun
    attributes:
      icon: mdi:stop
      label: Stop
  - card:
      type: entity
      entity: sun.sun
    attributes:
      icon: mdi:pause
      label: Pause

[MajorAutomation]

This only has 4 tabs, it is when you add the 5th tab this problem appears, I have the same issues when I add one more tab to yours.

`type: custom:tabbed-card attributes: minWidth: true isMinWidthIndicator: true styles: '--mdc-tab-horizontal-padding': 0px tabs:

• card: type: entity entity: sun.sun attributes: icon: mdi:pause label: Pause
• card: type: entity entity: sun.sun attributes: label: Play icon: mdi:play
• card: type: entity entity: sun.sun attributes: icon: mdi:stop label: Stop
• card: type: entity entity: sun.sun attributes: icon: mdi:pause label: Pause
• card: type: entity entity: sun.sun attributes: icon: mdi:pause label: Pause`

I think it is just a limitation I have to deal with.

[kinghat]

ill try and find an ios device to test on and report back. thanks for your time troubleshooting.