Table component width overflows screen when column data is large

[jawa-the-hutt]

Environment

• Vue 3.5.12
• Node 20.19.0
• MacOS
• Vite 6.3.2
• Nuxt UI 3.0.2/3.1.0

Is this bug related to Nuxt or Vue?

Vue

Version

v3.0.2/3.0.1

Reproduction

reproduction:
https://codesandbox.io/p/devbox/jolly-minsky-c2hdtr

Description

When using Nuxt UI v 3.0.2 and 3.1.0, both appear to experience an issue with the Table component and the width of the table due to columns that have enough data in them for the character count to exceed to size of the screen. I believe the whitespace-nowrap class being applied globally to the td slot is the main source of the issue. Furthermore, when the whitespace-nowrap class is applied, then any width class you try to apply to the column definition will apply in the html, but doesn't actually appear to limit the overall width of the column.

The only way I have found that will actually make the column the desired width is replace the whitespace-nowrap class with whitespace-normal class via:

1. Global change to the td slot via vite.config to something like this: table: { slots: { td: 'p-4 text-sm text-muted whitespace-normal [&:has([role=checkbox])]:pe-0' } }
2. The ui prop on the table with something like this: :ui="{ td: 'whitespace-normal p-4 text-sm text-muted [&:has([role=checkbox])]:pe-0' }"
3. Add whitespace-normal in the column def via the meta class { meta: { class: { td: 'w-20 whitespace-normal' } } }

Additional context

No response

Logs

[antoinemcx]

Same issue here.
Changing the td style in the ui prop worked for me as well but seems to prevent text truncation

[github-actions]

Hi! 👋

This issue has been automatically closed due to prolonged inactivity.

We're a small team and can't address every report, but we appreciate your feedback and contributions.

If this issue is still relevant with the latest version of Nuxt UI, please feel free to reopen or create a new issue with updated details.

Thank you for your understanding and support!

— Nuxt UI Team