How to get md-text-button to be clickable the whole element and not outside

[paladox]

Hi, how do I get md-text-button to be clickable for the entire element without it being clickable outside? I know there's touch-target="none" but my issue is this makes the button only clickable in the middle (ripple / hover etc). I can extend the hover to work properly but not the ripple. See the linked video.

Screen.Recording.2025-09-13.at.15.16.41.mov

[paladox]

    let button = html` <md-text-button
      class=${classes}
      aria-label=${ariaLabel}
      touch-target="none"
      @click=${expandHandler}
      @mouseenter=${() => mouseHandler('enter')}
      @mouseleave=${() => mouseHandler('leave')}
    >
      <span class="showContext">${text}</span>
    </md-text-button>`;

        md-text-button {
          text-transform: none;
          align-items: center;
          background-color: var(--background-color);
          --md-text-button-label-text-font: inherit;
          /* This is also set in the button-label-font css var above. We keep this incase it is also needed. */
          font-family: inherit;
          margin: var(--margin, 0);
          min-width: var(--border, 0);
          color: var(--diff-context-control-color);
          border: solid var(--border-color);
          border-width: 1px;
          border-radius: var(--border-radius);
          padding: var(--spacing-s) var(--spacing-l);
          --md-text-button-container-color: var(--background-color);
          --md-sys-color-primary: var(--diff-context-control-color);
          /* We set this to 0 which defaults to 12px under text-button.
            This is because for some reason it makes the size of it bigger
            which makes some of the buttons look wrong. E.g. attention set has
            a bigger width and thus a lot of space. This fixes it. */
          --md-text-button-leading-space: 0;
          --md-text-button-trailing-space: 0;
          /* Brings back the round corners we had with paper-button */
          --md-text-button-container-shape: 4px;
          /* Needed to resize properly */
          --md-text-button-container-height: none;
          /* From paper-button */
          -webkit-font-smoothing: antialiased;
          --md-text-button-hover-state-layer-color: rgba(0, 0, 0, 0.12);
        }

        md-text-button:hover {
          /* same as defined in gr-button and --md-text-button-hover-state-layer-color */
          background: rgba(0, 0, 0, 0.12);
          border-radius: var(--border-radius);
        }
        md-text-button:focus-visible {
          /* paper-button sets this to 0, thus preventing focus-based styling. */
          outline-width: 1px;
        }