width="auto" columns render with header/body width mismatch

[georgianastasov]

Description

When using igx-grid with multiple columns configured with width="auto" (plus a row selector template and a pinned column), on a render/page reload the grid render with the last columns visually shifted, where the column header widths do not match the corresponding body cell widths.

This behavior does not reproduce the same way on a hot update/HMR (component-only refresh), and was not observed in a prior version of the same application using Angular 18 / igniteui-angular 18 with similar width="auto" usage. This suggests a potential regression or a timing/layout calculation issue in newer versions.

• igniteui-angular version: 21.x
• browser: all

Steps to reproduce

1. Open the StackBlitz repro:
   https://stackblitz.com/edit/hilmsct7?file=src%2Fapp%2Fgrid%2Fgrid-column-hiding-toolbar-sample%2Fgrid-column-hiding-toolbar-sample.component.html
2. Confirm the grid includes:
   • multiple columns with width="auto"
   • a pinned "Actions" column
   • a igxRowSelector template rendering an igx-checkbox
3. Perform a reload.
4. Observe the right-most / last columns after reload.

Result

After a render/reload, the grid render with header and body columns not aligned, i.e. the last columns appear shifted and header widths differ from body cell widths for the same columns.

Expected result

Header and body cells for each column should always have the same calculated width.

Attachments

Repro sample:
https://stackblitz.com/edit/hilmsct7?file=src%2Fapp%2Fgrid%2Fgrid-column-hiding-toolbar-sample%2Fgrid-column-hiding-toolbar-sample.component.html

Screenshot/GIF: