bug(MatTable): Flex tables do not correctly expand height of footer row

[ian-burnett]

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

V14

Description

When using footer rows with flex tables, the footer row height will not expand like the header rows do.

Suspect this is because of an incorrect CSS selector in material/table/table.scss.

Selector:

.mat-mdc-table mat-footer-row.mat-mdc-footer-cell {
   ...
}

Should be:

.mat-mdc-table mat-footer-row.mat-mdc-footer-row {
   ...
}

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-dqhwvz?file=src%2Fapp%2Ftable-flex-basic-example.css

Steps to reproduce:

1. Angular Material table example should have X in second column for both header and footer
2. X in footer is clipped top and bottom
3. Uncomment CSS selector in table-flex-basic-example.css to fix problem

Expected Behavior

Expect footer row to auto expand height in a similar way to header row.

Actual Behavior

Footer does not auto expand height.

Environment

• Angular: 16.1.3
• CDK/Material: 16.1.3
• Browser(s): Firefox, Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[zarend]

Hello,

Thank you for proving a stackblitz reproduction. I am able to reproduce on the stackblitz.

Prioritizing as a P4, since there is an easy work-around.

Assigned to @andrewseguin since he's an owner of Table.

-Zach