Fr?/Bug.. Changing icon size back to 24px moves divider out of the right side card

Mariusthvdb commented 2 years ago

My Home Assistant version: 2022.3.0.dev20220208

Fold-entity-row version (FROM BROWSER CONSOLE): 2.2.0

What I am doing: editing the resource (so I am causing a bug...) hence this might also be a FR to bring back 24 px icon size.... the 32px really is way too big for my taste, and imho stands out compared to all other icons in the interface

maybe there's an additional edit I need to do, and if you would know that, please help me out?

What I expected to happen: divider remains inside card What happened instead: right side overflow:

Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
      #head {
        display: flex;
        align-items: center;
        --toggle-icon-width: 24px; # <---- changed from 32px, as was in 20012
      }

# End of code

Error messages from the browser console:

By putting an X in the boxes ([X]) below, I indicate that I:

[X] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).
[X] Have made sure I am using the latest version of the plugin.
[X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.
[X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

ildar170975 commented 2 years ago

Check these five examples:

type: vertical-stack
cards:
- type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: 1
    card_mod:
      style: |
        div#head ha-icon {
          border: 1px solid red;
        }
    <<: &ref_settings
      padding: 0
      open: false
      entities:
        - entity: sun.sun
        - entity: sun.sun
- type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: 2
    <<: *ref_settings
    card_mod:
      style: |
        div#head {
          --toggle-icon-width: 24px;
        }
        div#head ha-icon {
          border: 1px solid red;
        }
- type: entities
card_mod:
  style: |
    .card-content {
      overflow-x: clip;
    }
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: 3
    <<: *ref_settings
    card_mod:
      style: |
        div#head {
          --toggle-icon-width: 24px;
        }
        div#head ha-icon {
          border: 1px solid red;
        }
- type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: 4
    <<: *ref_settings
    card_mod:
      style: |
        div#head ha-icon {
          --toggle-icon-width: 24px;
          border: 1px solid red;
        }
- type: entities
entities:
  - type: custom:fold-entity-row
    head:
      type: section
      label: 5
    <<: *ref_settings
    card_mod:
      style: |
        div#head ha-icon {
          --mdc-icon-size: 24px;
          width: 24px;
          border: 1px solid red;
        }

Note red border was added to highlight the chevron button (needs 2px - and causes a small gap between divider & right border with default settings).

1) Default settings. 2) Adding --toggle-icon-width: 24px to the div#head makes the divider to go beyond the right border (glitch). 3) Same as No.3 but with clipping by overflow-x: clip. 4) Adding --toggle-icon-width: 24px to the div#head ha-icon does NOT cause the glitch. 5) Another way to change the button's size.

The divider goes beyond the right border because the ".divider" element has a "margin-right: -48px" property:

If this property is set to "-40px" (i.e. "calc(32px - 24px)") then the glitch will not be present.

Mariusthvdb commented 2 years ago

wow, thats some pretty amazing stuff you found. lll test that tomorrow. thanks!

also, because it would be a system wide thing for me, (and using card-mod-theme wasnt stable for me in the past), I hope to edit that in the resource , but have to figure out what to do with the current --toggle-icon-width:....

its used a couple of times and I dont exactly see what the various elements do.

Mariusthvdb commented 2 years ago

the calculation is a bit hacky, but I believe to have found a way to use the 24px on the toggle-icon-width, still cut the divider's overflow by subtracting that same 8px difference in the calc():

      #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);
      }

and all icons in the config have the smaller 24px icon and dont overflow the divider anymore.

As far as I could see, changing this (in fact method 2/3) moves the icon a bit further to the right than when using the methods 4 or 5.

Have not yet found a way to do this as a card-mod-theme setting, to test if that would be a reliable alternative without hacking the code of the resource...

ildar170975 commented 2 years ago

max-width: calc(100% - var(--toggle-icon-width) - 8px);

IMHO this trick helps ONLY when --toggle-icon-width: 24px. It causes a wrong gap between the divider and the right border in case of --toggle-icon-width: 32px:

  - type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          type: section
          label: 6
        padding: 0
        open: false
        entities:
          - entity: sun.sun
          - entity: sun.sun
        card_mod:
          style: |
            div#head {
              --toggle-icon-width: 24px;
            }
            div#head hui-section-row {
              max-width: calc(100% - var(--toggle-icon-width) - 8px);
            }
  - type: entities
    entities:
      - type: custom:fold-entity-row
        head:
          type: section
          label: 7
        padding: 0
        open: false
        entities:
          - entity: sun.sun
          - entity: sun.sun
        card_mod:
          style: |
            div#head {
              --toggle-icon-width: 32px;
            }
            div#head hui-section-row {
              max-width: calc(100% - var(--toggle-icon-width) - 8px);
            }

So, changing the max-width helps only for the particular case, not in general(((

Mariusthvdb commented 2 years ago

well, yes, thats correct.

First I tried to edit the resource so it always uses 24px. That caused the overflow if the divider, so I had to change that with the -8px in the calc().

They are a set of edits tied together.

btw do note: I edited the resource, I havent set any mod now in the card configs.

guess we can try to create a card-mod-theme mod for this:

        card_mod:
          style: |
            div#head {
              --toggle-icon-width: 24px;
            }
            div#head hui-section-row {
              max-width: calc(100% - var(--toggle-icon-width) - 8px);
            }

and see if it is robust ?

ildar170975 commented 2 years ago

try to create a card-mod-theme mod for this:

Got a problem with customizing fold-entity-row by card-mod-theme: https://community.home-assistant.io/t/card-mod-super-charge-your-themes/212176/1042?u=ildar_gabdullin Happened either after the latest card-mod or the latest fold-entity-row.

Haven't registered an issue on Github yet.

Mariusthvdb commented 2 years ago

a yes, I saw that, but hadnt responded yet. I am having trouble with those classes in the first place, let alone in this particular case. I did file an issue on card-mod for my particular case, maybe you should do for yours too.

thomasloven / lovelace-fold-entity-row

Fr?/Bug.. Changing icon size back to 24px moves divider out of the right side card #211