fix: CpsTreeTableComponent issues

[fateeand]

Description

Summary

Fixes several cross-browser rendering and column-width bugs in cps-tree-table, makes manually-resized columns coexist correctly with its auto-fit column layout.

Changes

• Safari: loader now renders correctly. PrimeNG's TreeTable base styles were missing display: block on the root element (unlike the sibling DataTable component), which made Safari collapse the loading mask's width instead of sizing it to the table. Added the missing display: block, plus a compensating rule so tables using scrollHeight="flex" still lay out as a flex column as intended.

Before:

After:

• Chromium: row expand/collapse no longer jumps. The column-width recalculation triggered by expanding/collapsing a row ran too early — before the newly expanded/collapsed rows were actually reflected in the table — causing a visible correction a moment later. It's now deferred to run immediately after that update completes, before the next paint, so the correct layout is what renders the first time. PrimeNG's TreeTableToggler emits onNodeExpand before it calls updateSerializedValue() (the step that actually recomputes which rows are visible), so at this point the new child rows don't exist yet in the bound data. A queued microtask runs after that synchronous call chain finishes (so the new rows are ready) but still before the browser paints (unlike setTimeout, which yields to a paint first) - that's what avoids visibly jumping between the old and new content.

Before:

After:

• Resized columns now stay aligned with the header, and keep their width. Manually resizing a column (drag or keyboard) previously caused the header and body columns to drift out of alignment as soon as anything else triggered a layout recalculation (sorting, filtering, expanding a row, etc.), because header and body columns were being frozen inconsistently with each other. A resized column now keeps its exact width and the rest of the columns continue to auto-fit their content around it, with header and body always staying in sync.

• Fixed a column-misalignment case when expanding multiple different rows in a row. Expanding a second, different row after an initial expand could leave earlier rows out of sync with the header. Column widths are now consistently kept in sync across any sequence of expand/collapse actions, not just the first one.

• Chromium: columns no longer jump when sorting or filtering. Same root cause and fix as the expand/collapse jump above - the column-width recalculation triggered by sorting or filtering now also runs immediately after the update completes, before the next paint, instead of a moment later.

• Fixed columns staying misaligned after clearing a global filter on virtual-scroll tables. When a filtered result set jumped from no matches back to many rows, the column-width recalculation could run before the virtual scroller finished repopulating rows, leaving the body permanently unstyled. It now automatically retries once the rows are actually available, instead of giving up after a single attempt.

Before:

After:

• Removed a hardcoded pixel value. The fixed width used for selectable/row-menu columns was hardcoded as 55 (px) in several places; it's now derived from the root font size service (3.4375rem equivalent), so it stays correct if the root font size changes.

---

Release notes:

• fix tree table safari loader position and
• fix tree table columns/content jump when expanding or collapsing rows in Chromium
• fix tree table column widths misalign after resizing a column
• fix tree table column widths misalign after expanding multiple different rows
• fix tree table columns jump when sorting in Chromium
• fix columns misalign after clearing a global filter on a virtual-scroll table
• fix dynamic columns widths depending on root font size

[github-actions]

Coverage report for library

St.❔	Category	Percentage	Covered / Total
🟡	Statements	78.76%	6209/7883
🟡	Branches	68.3%	2864/4193
🟢	Functions	80.03%	1170/1462
🟡	Lines	79.85%	5805/7270

Test suite run success

2433 tests passing in 76 suites.

Report generated by 🧪jest coverage report action from 31b8894

[Copilot]

Pull request overview

Fixes cross-browser rendering issues in cps-tree-table by adjusting PrimeNG TreeTable base layout styles for Safari, deferring header width recalculation on node expand/collapse to eliminate Chromium column “jump”, and replacing a hardcoded selectable/row-menu column width with a root-font-size-derived value.

Changes:

• Updated TreeTable host CSS to ensure the loader mask sizes correctly in Safari while preserving flex-scroll behavior.
• Deferred expand/collapse header-width recalculation to run after the DOM reflects the new rows (before paint) to prevent Chromium column width corrections.
• Replaced hardcoded 55px sizing for selectable/row-menu columns with a rem-based constant derived from root font size.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts	Updates auto-layout width measurement logic, replaces hardcoded widths with root-font-size-derived values, and defers recalculation on expand/collapse via microtask + change detection.
projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.scss	Ensures .p-treetable participates in layout in Safari (display: block) while keeping flex scroll layouts working (display: flex for flex-scrollable variant).

Comments suppressed due to low confidence (1)

projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts:1036

• The DocumentFragment/clonedTd work here is effectively dead: styles are applied to clonedTd, but only clonedTd.innerHTML is measured in hiddenDiv, so those styles (and the fragment append/remove) have no effect. This adds DOM churn and makes the sizing logic harder to follow.

      const tdWidths: number[] = [];
      const fragment = this.document.createDocumentFragment();

      bodyRows.forEach((tr: HTMLElement) => {
        const tds = tr?.querySelectorAll('td');

[github-actions]

Playwright test results

 240 passed

Details

 240 tests across 5 suites
 9 minutes, 1 second
 31b8894
 For details, download the Playwright report

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.