[Bug]: `Checkbox` inside a `DataTable` component moves once checked

[lohrm-stabl]

Describe the bug

The Checkbox inside a DataTable component moves once checked and unchecked.

Unchecked

Checked

Affected component/components

DataTable, Checkbodx

How to reproduce

1. Go to https://ui.shadcn.com/docs/components/data-table
2. Check one of the checkboxes of the columns in the data table example

You will see that the checkbox floats up once its checked.

Link to reproduce

https://ui.shadcn.com/docs/components/data-table

Logs

No response

System Info

https://ui.shadcn.com/docs/components/data-table

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[anantraghuvanshi]

Hello @lohrm-stabl I tried recreating this issue, but I think the float is not appearing to me. May you look into this? Unchecked: Checked: Could it be a browser/OS specific issue as I am currently using brave and ubuntu to run this locally?

[lohrm-stabl]

Hi @anantraghuvanshi, I encountered this locally, but then verified that it's not an issue with my implementation by visiting https://ui.shadcn.com/docs/components/data-table, where this issues persists as well.

I can see this issue on latest Firefox on Windows 11 and latest Firefox on Arch. With Edge browser on Windows 11 the effect is really subtle, but still there.

[anantraghuvanshi]

That could be the case, @lohrm-stabl. I tested it in chrome in Windows 11 no issues over there as well. So progress from my side in replicating this issue, sadly!

[linus-jansson]

This seems to only appear for me on firefox but not Edge. Seems to be a browser issue?

[pepegc]

Same bug, Firefox 124.0.2 (64-bit), Sonoma 14.4.1 (23E224)