mi6 / mi6/ic-ui-kit

Data Table truncation: wiggling at widths

Open
#3,663 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.