bug(mat-select): Span inside of mat-select-trigger causes height to change by 1px

[theScottyJam]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

Using <mat-select-trigger> with an inner span causes the element's height to change by 1px.

More precisely, in an example like this (taken from the website):

    <mat-select-trigger>
      {{toppings.value?.[0] || ''}}
      @if ((toppings.value?.length || 0) > 1) {
        <span class="example-additional-selection">
          (+{{(toppings.value?.length || 0) - 1}} {{toppings.value?.length === 2 ? 'other' : 'others'}})
        </span>
      }
    </mat-select-trigger>

That <span class="..."> portion will, when rendered, cause the size of the select box to grow by 1px.

Reproduction

StackBlitz link: https://stackblitz.com/edit/33iirb?file=package.json
Steps to reproduce:

1. The bug can be seen in the Angular Material's example - https://material.angular.io/components/select/overview#customizing-the-trigger-label - the above StackBlitz is the same one from the example.
2. Expand the select box and select multiple items to make the "(+2 items)" span appear. Notice that the select box grows by 1px when this happens.

Expected Behavior

It should stay the same size.

If there's some sort of CSS rules/something that needs to apply to keep this the same size, that should be demonstrated in the example on the website.

Actual Behavior

It make's the page content bob up and down by 1px when the span is shown/hidden.

Environment

• Angular: 19.0
• CDK/Material: 18.2.4
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Tested on Fedora and Ubuntu

[crisbeto]

You can fix it by setting line-height: 1 on the span. I've sent a fix at #29746.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}