[JeanMarcMilletScality]

TL;DR — A table row with no room left shrank its checkbox and dropped-columns cells to zero width instead of overflowing, so those cells' controls were painted outside themselves, over the neighbouring column.

Context / Why

useDroppedColumns and useCheckbox each append a synthetic column and size it through cellStyle with a bare width. A row is a flex container and bodyCellStyle resets every cell to min-width: 0, so a cell with a width and no flex computes to flex: 0 1 auto with an automatic minimum of zero — the only cell in the row the layout can shrink without limit, and the first it takes space from.

The consumer's own columns therefore keep their declared widths while the injected one collapses. In the new story the reveal cell measures 3px at a 320px container and 23px at 340, against the 60px it declares, and its button paints across the neighbouring cell. The checkbox column carries the same declaration, which puts row selection in the same position.

🧩 Approach

 // useCheckbox.tsx — the selection column
-cellStyle: { width: '50px' }
+cellStyle: { flex: '0 0 50px' }

 // useDroppedColumns.tsx — the reveal column
-cellStyle: { width: '60px', justifyContent: 'center' }
+cellStyle: { flex: '0 0 60px', justifyContent: 'center' }

Each cell now holds the width it declares. flex: 0 0 Npx is what the bare width already meant; the shrink factor was the accident.

🔍 Review focus

• 🔴 This trades a silent crush for a visible overflow, and that is the whole change. These cells no longer absorb a row's shortfall, so a row that genuinely cannot fit now overflows by the width they reclaimed. It does not rescue the trigger: in the new story, below a 380px container the row overflows, and at 320 the trigger ends up past the frame's edge — further out than before the change, because the cell it sits in is no longer zero. A table whose rows are short of space still needs a dropAt on one more column, which stays the consumer's call. What this fixes is the box model: the cell is the width it says it is, and the overflow is now visible rather than hidden inside a collapsed cell.

🧪 How to test

1. npm run storybook, open Components / Data Display / Table › Reveal trigger in a row with no room left.
2. Drag the dashed frame's bottom-right corner to about 340px wide. Last Name and Age drop out, leaving a floored name column, a fixed-width actions column and the reveal trigger — a row that cannot fit.
3. Inspect the row's last cell: 60px, flex: 0 0 60px. On development/1.0 the same cell measures 23px and its +2 button is painted outside it, reaching back over the Edit cell.

No before/after screenshot: in the band where the cell is crushed the two states look alike, because the button is painted outside its cell either way. The difference is the cell's computed width, so the check above is the one that shows it.

The existing Responsive column drop with reveal story cannot show any of this — all its columns are zero-basis flex, so its rows never overflow. That is why the new story declares a minWidth on the name column and a fixed-width actions column.

🔗 References

• CUI-70 — the measurements, and the consumer-side case that surfaced it.

[bert-e]

Hello jeanmarcmilletscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options

name	description	privileged	authored
/after_pull_request	Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval	Bypass the pull request author's approval	⭐
/bypass_build_status	Bypass the build and test status	⭐
/bypass_commit_size	Bypass the check on the size of the changeset TBA	⭐
/bypass_incompatible_branch	Bypass the check on the source branch prefix	⭐
/bypass_jira_check	Bypass the Jira issue check	⭐
/bypass_peer_approval	Bypass the pull request peers' approval	⭐
/bypass_leader_approval	Bypass the pull request leaders' approval	⭐
/bypass_source_branch_lineage	Bypass the cross-branch contamination check	⭐
/approve	Instruct Bert-E that the author has approved the pull request.		✍️
/create_pull_requests	Allow the creation of integration pull requests.
/create_integration_branches	Allow the creation of integration branches.
/no_octopus	Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity	Change review acceptance criteria from one reviewer at least to all reviewers
/wait	Instruct Bert-E not to run until further notice.

Available commands

name	description	privileged
/help	Print Bert-E's manual in the pull request.
/status	Print Bert-E's current status in the pull request.
/clear	Remove all comments from Bert-E from the history TBA
/retry	Re-start a fresh build TBA
/build	Re-start a fresh build TBA
/force_reset	Delete integration branches & pull requests, and restart merge process from the beginning.
/reset	Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

[bert-e]

Waiting for approval

The following approvals are needed before I can proceed with the merge:

• the author

• one peer

Peer approvals must include at least 1 approval from the following list:

• @ZiyangLinScality

• @hervedombya

• @ChengYanJin

• @damiengillesscality

• @sanassicisse

• @JeanMarcMilletScality

• @JBWatenbergScality

• @PierreAlexandreDelgado