Please assist of the svg icon area overflow in the button card grid area.

[aj-chan]

Let's say I made some icon svg and used in the button card. But seems the icon has a little bigger cause the entity 'Name' and 'State' on the Button Card moved down and moved out of the boundary of the button card. it should the css problem. I cannot found the answer on google. I tried overflow:hidden cannot fix this issue. the goal I wanna to do is the icon of some animation can show on top of the name or just cover the name a little bit is fine.

<img width="317" alt="CleanShot 2022-11-30 at 01 22 30@2x" src="https://user-images.githubusercontent.com

/55744541/204600431-b2440e02-53a9-458d-9cbc-637ec8bfa360.png">

[matt8707]

have you read this? https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594/264

[aj-chan]

Yes. I read already. For the water tap, i wanna it has the infinite cycle animation, i wanna make the water drops effect keep drop on the name and state. So wanna ask how can set the css parameters to make the overflowing grid of the icon , so that the overflowing icon grid does not push the name and state out of the button card boundary, but overlaps it on the name and state

[aj-chan]

Because my purpose is to want the icon area of ​​the grid, when the size of an svg is too large, the name and status can be overlapped and displayed together, without pushing the name and status out of the boundary

[matt8707]

it shouldn't

share your template and icons

[horacecar]

Here it is. Thankyou.

icon_worktop_light:
  styles:
    custom_fields:
      icon:
        - margin-top: 3%
        - margin-left: 0%
        - width: 130%
  custom_fields:
    icon: |
      [[[
        const state = (variables.state_on && variables.timeout < 2000) ? 'on' : null;
        const style = `
            <style>
              @keyframes water-drop {
                0%{
                  -webkit-transform: translate(0px,0px)  scaleX(0.8) scaleY(0.8);
                  -webkit-transform-origin: 56.3% 20%;
                  -webkit-opacity: 0;
                }
                10%{
                  -webkit-transform: translate(0px,4px)  scaleX(1.3)  scaleY(1.3)  ;
                  -webkit-transform-origin: 56.3% 20%;
                  -webkit-opacity: 1;
                }      
                50%{
                  -webkit-transform: translate(0px,8px) scaleX(0.8) scaleY(2)   ;
                  -webkit-transform-origin: 56.3% 20%;
                  -webkit-opacity: 1;
                }   
                95%{
                  -webkit-transform: translate(0px,7px) scaleX(1.3) scaleY(1.7) ;
                  -webkit-transform-origin: 56.3% 20%;
                  -webkit-opacity: 1;
                }   

                100%{
                  -webkit-transform: translate(0px,40px) scaleX(1) scaleY(1)  ;
                  -webkit-transform-origin: bottom;
                  -webkit-opacity: 1;
                }      
              }
              .water-drop {
                -webkit-animation-direction: normal;
                -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
                -webkit-animation: water-drop 4s infinite ease-in-out ;
                -webkit-transform-origin: 81.8% 12.7%;
              }
            </style>
          `;
        if (variables.state === 'on' ) {
          return `
            <svg viewBox="0 0 55 90"> ${style} 
              <path fill="red" d="M26.88 4.4023v2.1154c0 .7-.5719 1.246-1.2313 1.176L15.68 6.6416l-9.9687 1.05c-.6594.07-1.2313-.4767-1.2313-1.176V4.4023c0-.7.5719-1.246 1.2313-1.176l9.9687 1.05 9.9687-1.05C26.3081 3.1563 26.88 3.703 26.88 4.4023Z"/> 
              <path class="water-drop" fill="#74ccf4" d="M 31.6825 15.0983 C 31.5385 14.5785 30.7915 14.556 30.6295 15.0983 C 29.788 17.9378 27.988 18.7095 27.988 20.7098 C 27.988 22.4828 29.4055 23.916 31.156 23.916 S 34.324 22.4828 34.324 20.7098 C 34.324 18.6983 32.5285 17.9513 31.6825 15.0983 Z M 31.156 22.764 C 30.0445 22.764 29.14 21.8595 29.14 20.748 C 29.14 20.5883 29.2683 20.46 29.428 20.46 S 29.716 20.5883 29.716 20.748 C 29.716 21.5423 30.3618 22.188 31.156 22.188 C 31.3158 22.188 31.444 22.3163 31.444 22.476 C 31.444 22.6358 31.3158 22.764 31.156 22.764 Z"/> 
              <path fill="#3d454a" d="M 24.64 13.44 H 21.952 C 20.832 12.5439 19.488 11.872 17.92 11.4239 V 8.0639 L 15.68 7.84 L 13.44 8.0639 V 11.4239 C 11.872 11.872 10.528 12.5439 9.408 13.44 H 1.12 C 0.448 13.44 0 13.888 0 14.56 V 21.28 C 0 21.952 0.448 22.4 1.12 22.4 H 7.6161 C 8.96 25.088 12.0961 26.88 15.68 26.88 S 22.4 25.088 23.7439 22.4 H 24.64 C 25.9839 22.4 26.88 23.2959 26.88 24.64 C 26.88 25.9839 27.7761 26.88 29.12 26.88 H 33.6 C 34.9439 26.88 35.84 25.9839 35.84 24.64 C 35.84 18.368 30.912 13.44 24.64 13.44 Z M 17.92 3.1359 V 1.12 C 17.92 0.448 17.472 0 16.8 0 H 14.56 C 13.888 0 13.44 0.448 13.44 1.12 V 3.1359 L 15.68 3.36 L 17.92 3.1359 Z"/> 
            </svg>
          `;
        } else {
          return `
            <svg viewBox="0 0 55 75"> 
              <path fill="#9da0a2" d="M26.88 4.4023v2.1154c0 .7-.5719 1.246-1.2313 1.176L15.68 6.6416l-9.9687 1.05c-.6594.07-1.2313-.4767-1.2313-1.176V4.4023c0-.7.5719-1.246 1.2313-1.176l9.9687 1.05 9.9687-1.05C26.3081 3.1563 26.88 3.703 26.88 4.4023Z"/> 
              <path fill="#9da0a2" d="M 24.64 13.44 H 21.952 C 20.832 12.5439 19.488 11.872 17.92 11.4239 V 8.0639 L 15.68 7.84 L 13.44 8.0639 V 11.4239 C 11.872 11.872 10.528 12.5439 9.408 13.44 H 1.12 C 0.448 13.44 0 13.888 0 14.56 V 21.28 C 0 21.952 0.448 22.4 1.12 22.4 H 7.6161 C 8.96 25.088 12.0961 26.88 15.68 26.88 S 22.4 25.088 23.7439 22.4 H 24.64 C 25.9839 22.4 26.88 23.2959 26.88 24.64 C 26.88 25.9839 27.7761 26.88 29.12 26.88 H 33.6 C 34.9439 26.88 35.84 25.9839 35.84 24.64 C 35.84 18.368 30.912 13.44 24.64 13.44 Z M 17.92 3.1359 V 1.12 C 17.92 0.448 17.472 0 16.8 0 H 14.56 C 13.888 0 13.44 0.448 13.44 1.12 V 3.1359 L 15.68 3.36 L 17.92 3.1359 Z"/> 
            </svg>
          `;
        }
      ]]]

base:
  template:
    - settings
    - tilt
    - extra_styles
  variables:
    state_on: >
      [[[ return ['on', 'home', 'cool', 'fan_only', 'playing', 'unlocked'].indexOf(!entity || entity.state) !== -1; ]]]
    state: >
      [[[ return !entity || entity.state; ]]]
    entity_id: >
      [[[ return !entity || entity.entity_id; ]]]
    entity_picture: >
      [[[ return !entity || entity.attributes.entity_picture; ]]]
    timeout: >
      [[[ return !entity || Date.now() - Date.parse(entity.last_changed); ]]]
  aspect_ratio: 1/1
  show_state: true
  show_icon: false
#  show_last_changed: true
  state_display: >
    [[[ if (variables.state === true) return variables.translate_unknown; ]]]
  tap_action:
    ui_sound_tablet: |
      [[[
        let screensaver = states[variables.entity_tablet] === undefined ||
            states[variables.entity_tablet].state;

        if (variables.state === 'off' && screensaver === 'off') {
            hass.callService('media_player', 'play_media', {
                entity_id: variables.entity_browser_mod,
                media_content_id: '/local/sound/on.m4a',
                media_content_type: 'music'
            });
        }
        if (variables.state_on && screensaver === 'off') {
            hass.callService('media_player', 'play_media', {
                entity_id: variables.entity_browser_mod,
                media_content_id: '/local/sound/off.m4a',
                media_content_type: 'music'
            });
        }
      ]]]
    card_bounce: |
      [[[
        // add animation
        if (this.getElementsByTagName("style").length === 0) {
            // phone condition
            let mq = window.matchMedia('(max-width: 800px)').matches;
            let style = document.createElement('style');
            style.innerHTML = `
                @keyframes card_bounce {
                    0%   { transform: scale(1); }
                    10%  { transform: scale(${ mq ? '0.92' : '0.94' }); }
                    25%  { transform: scale(1); }
                    30%  { transform: scale(${ mq ? '0.96' : '0.98' }); }
                    100% { transform: scale(1); }
                }
            `;
            this.appendChild(style);
        }
        // duration
        let duration = 800;
        // animate
        this.style.animation = `card_bounce ${duration}ms cubic-bezier(0.22, 1, 0.36, 1)`;
        // reset
        window.setTimeout(() => { this.style.animation = "none"; }, duration + 100)
      ]]]
    action: toggle
    haptic: medium
  double_tap_action:
    haptic: success
  hold_action:
    action: call-service
    service: browser_mod.toast
    service_data:
      duration: 3000
      message: >
        Tip! Double click to open popup menu
    haptic: failure
  styles:
    grid:
      - grid-template-areas: |
          "icon  circle"
          "icon  circle"
          "n     n"
          "s     s"
      - grid-template-columns: repeat(2, 1fr)
      - grid-template-rows: auto repeat(3, min-content)
      - gap: 1.3%
      - align-items: start
      - will-change: transform
    name:
      - justify-self: start
      - line-height: 121%
    label:
      - align-self: end
      - justify-self: end
      - color: gray
    state:
      - align-self: end
      - justify-self: start
      - line-height: 115%
    card:
      - border-radius: var(--button-card-border-radius)
      - -webkit-tap-highlight-color: rgba(0,0,0,0)
      - transition: none
      - --mdc-ripple-color: >
          [[[
            return variables.state_on
                ? 'rgb(0, 0, 0)'
                : '#97989c';
          ]]]
      - color: >
          [[[
            return variables.state_on
                ? '#4b5254'
                : '#97989c';
          ]]]
      - background-color: >
          [[[
            return variables.state_on
                ? 'rgba(255, 255, 255, 0.85)'
                : 'rgba(115, 115, 115, 0.25)';
          ]]]
# prevent for icon and name shaking
  custom_fields:
    ripple: >
      [[[
        if (window.matchMedia('(max-width: 800px)').matches) {
            window.setTimeout(() => {
                let elt = this.shadowRoot;
                let ripple = elt.getElementById('ripple').shadowRoot.querySelector('div');
                ripple.style.display = 'none';
            }, 200)
        }
      ]]]

[matt8707]

the changes you've made causes this, redownload base.yaml

[aj-chan]

Okay. I will try. I will close the ticket. Thanks for assist.