(How) can we move the label to the left

[Mariusthvdb]

The label of the fold seems a bit too much to the right.

personally I much prefer:

especially so, because the fold Label now 'embraces' the entities in the fold:

Because of that I have been experimenting with various edits in the resource itself. Also tried several card-mod stylings and even had that working I a card-mod-theme.

the latter doesnt work reliably and still shows on regular spot on first load

  card-mod-row-yaml: |
    div#head hui-section-row $: |
      .label {
        margin-left: 0px;
      }

so thats no solution. What I have found (together with Ildar, who tested and suggested all possible options) is that the positioning works very solidly using the same mod on an individual fold:

type: custom:fold-entity-row
head:
  type: section
  label: Mobile app
  card_mod: &label
    style: |
      .label {
        margin-left: 0px;
      }

we can easily enough use that, and insert it using card_mod: *label on all subsequent fields in the yaml file.

However, that takes over 300 card_mods in my system ;-) Hence this FR: could we somehow set the default for the fold label to use that styling (so not in the theme-mod, because as we have established that isnt stable).

If anything, an edit to the resource would be best probably, but, I couldn't make that happen yet.

Please have a look, and I anyone else knows a way to add the styling to the resource I would appreciate that a lot.

thanks for considering

[Mariusthvdb]

for reference: note that this card_mod does not work in Chrome/Mac. Safari and Firefox do move the label

[Mariusthvdb]

as another fine illustration:

out of the box

card_mod in place

[Mariusthvdb]

we apparently need to use:

style_label_margin:
  style: |
    .label {
      margin-left: 0px !important;
    }

now in Safari too...

How I wish we could set this globally, or edit it in the resource... Ive edited the resource with:

      #head {
        display: flex;
        align-items: center;
        --toggle-icon-width: 24px;
      }
      #head :not(ha-icon) {
        flex-grow: 1;
        max-width: calc(100% - var(--toggle-icon-width) - 8px);
      }
      ha-icon {
        width: var(--toggle-icon-width);
        color: var(--primary-color);
        cursor: pointer;
        border-radius: 50%;
        background-size: cover;
        --mdc-icon-size: var(--toggle-icon-width);
      }

to replace this card_mod:

  style:
    ha-icon:
      $: |
        ha-svg-icon {
          color: var(--primary-color);
          width: 24px;
        }

and no longer require almost 400 card_mods in the yaml. That effectively gives me a smaller arrow, anti uses my themes primary color.

Id prefer to set it globally in some variable, but this works ok.

Can Not find the correct setting for moving the label to the left and use margin-left: 0px.....

If anyone could show me how Id need to modify the resource to do so, it would be very. much appreciated.