Interactive Area - hitarea may overlaps boundaries of parent container

We're having a known limitation regarding the zui-interactive-icon. As the icon has an expanded hitarea, using pseudo-elements, the current implementation causes the container to expand and maybe display unwanted scrollbars.

A simple example for this behaviour:

<style>
  div.container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding: 8px 0px;
    margin: 0px;
  }
  div.label {
    width: 128px;
    font: var(--zui-typography-label1);
  }

  zui-input-password {
    flex-grow: 1;
  }
</style>

<zui-theme-provider theme="light">
    <zui-dialogbox
        header-text="Change administrator password"
        accept-label="Change Password"
        cancel-label="Cancel"
        style="width: 448px; height: auto"
        primary-button="accept"
    >
      <div id="new-password" class="container">
        <div class="label">New password</div>
        <zui-input-password value="add" class="zui-input-field"></zui-input-password>
      </div>
    </zui-dialogbox>
</zui-theme-provider>

Right now (August 2023) this issue can be solved by:

a) hiding the overflow (overflow: hidden) of the wrapping container

div.container {
  overflow: hidden;
}

This will hide the scrollbars, but also the expanded hitarea of the icon.

b) avoid the component, containing the interactive icon, to grow to its parent container

zui-input-password {
  flex-grow: 1;
  
  /*or: */
  
  width: 100%;
}

c) display the overflow of the wrapping container and hide the scrollbars

div.container {
  overflow: visible;

  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll;

  &::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }
}