Data Table truncation: wiggling at widths
- Dominant language
- TypeScript
- Stars
- 53
- Forks
- 63
- Avg merge
- 2d 4h
- Merged PRs (30d)
- 15
Description
### Summary of the bug
At certain screenwidths, the ellipsis truncation on the Data Table flips between being active and not. See attached video.
### 🪜 How to reproduce
Tell us the steps to reproduce the problem:
1. Go to [Playground Storybook ](https://mi6.github.io/ic-ui-kit/branches/data-table-dark-mode-colors/canary-react/?path=/story/react-components-data-table--playground&globals=theme:dark)
2. Increase screen width so that in the final column, 'Postcode' starts to appear in the cell values.
3. The cell contents should wiggle as truncation turns on and off.
### 📸 Screenshots or code
https://github.com/user-attachments/assets/84be90a2-3c4f-49c1-8e1c-b8146faf34b0
### 🖥 📱 Device
- Type: Desktop
- Device: MacBook
- Browser version: Chrome 137
### 🧐 Expected behaviour
Expect truncation to be stable when at a static width.
### 🚨 Urgency (low, medium or high)
If applicable, tell us how urgent it is that this issue gets resolved, based on the impact it has on your team's work or project timeline.
Contributor guide
Research direction
Start by reproducing the issue in the linked Playground Storybook at a static width, using the Data Table playground and Chrome. Observe the final-column Postcode transition while resizing; done means the cell contents no longer wiggle and ellipsis truncation remains stable at a fixed width.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100