minWidth: true doesn't not minimize width to icon size

[Mariusthvdb]

not sure if (where) we've discussed this before, so please allow me a dedicated issue on the matter.

using a main

type: custom:tabbed-card
attributes:
  minWidth: true
  isMinWidthIndicator: true

config one a set of tabbed cards only using an icon in the tab, still makes the card tabs go beyond the width of a single card, and added to that, we can not swipe it really. the overflow icon somewhat comes in sight when the one next to it is activated, but there's no real swiping the tabs

Maybe I am misconfiguring, if so please correct, but I would have hoped that 4 or 5 icons only should be able to be seen directly and not have it look like:

seems the minWidth indicator is working correctly, because this is without. As you can see, the tabs are just as wide in both configurations.

of course, I have also tried to set that option on the card itself:

    attributes:
      icon: mdi:home-roof
      minWidth: true

to no avail though, no difference at all
Please have a look why those tabs are not tighter, just as tight as the indicator

[gryzli133]

Same issue here, I would like to have 6-7 tabs with just an icon. Normally they could be all visible without scrolling, when they have no margins on both sides of the icon. Setting "minWidth: true" also did not changed that:

[Mariusthvdb]

you can do that using this:

type: custom:mod-card
card_mod:
  style:
    tabbed-card $:
      mwc-tab:
        $:
          mwc-tab-indicator $: |
           .mdc-tab-indicator__content--underline {
              border-color: var(--text-color-off) !important;
            }

          .: |
            .mdc-tab {
              min-width: 40px !important;;
              background: var(--primary-color) !important;
            }
            .material-icons {
              display: contents !important;
            }
            .mdc-tab--active {
              --mdc-icon-size: {{states('input_number.active_icon_size')}}px;
              /*background: var(--text-color-off) !important;*/
            }

#     .: |
#       tabbed-card {
#         --mdc-tab-horizontal-padding: 0px;
#       }

card:
  type: custom:tabbed-card
#   attributes:
  #   isFadingIndicator: true
  styles:
    --mdc-tab-horizontal-padding: 0px;
    --mdc-theme-primary: gold
    --mdc-tab-color-default: var(--text-primary-color)
  tabs:

note the horizontal-padding is a card config option, and you need to adjust your own preference for the min-width. Ive set the to 40, but you can play with that

[gryzli133]

thank you, in case there will be no update soon (solving that issue) then I will use your workaround ;-)

[crafty35a]

Maybe it's obvious, but this issue also applies to tabs using short text strings, not just icons:

There are 24h and 36h tabs hidden here that could easily fit without scrolling. It would be great for this to be fixed without needing card-mod!

[mogim0gi]

can you please PLEASE implement this, the card-mod cannot be solution to every enhancement suggestion.