UTable cell content refuses to wrap

[MCalder423]

Environment

• Operating System: Linux
• Node Version: v20.18.0
• Nuxt Version: 3.14.1592
• CLI Version: 3.16.0
• Nitro Version: 2.10.4
• Package Manager: npm@10.9.1
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/ui@2.19.2, @sidebase/nuxt-auth@0.9.4, @nuxt/image@1.8.1
• Build Modules: -

Version

v2.19.2

Reproduction

https://nuxtui-0mn3--3000--fc837ba8.local-credentialless.webcontainer.io

Description

This is the code from stackblitz, but it illustrates the problem (preview above). Basically, I am following the instructions for setting certain columns to have a maximum width, but UTable doesn't seem to be following them. If it's an implementation issue on my part, my apologies, but I've stared at this for a couple of days and I can't find any reason why I can't get the cell data to wrap.

Welcome to the playground!

  <p class="text-gray-500 dark:text-gray-400">Try your components here!</p>
</UCard>
<UTable :rows="data" :columns="columns">
</UTable>

<script setup> const columns = [ { key: "name", label: "Name", sortable: true, }, { key: "address", label: "Address", rowClass: "max-w-[200px] whitespace-normal break-word", width: 200 }, { key: "description", label: "Description", rowClass: "max-w-[200px] whitespace-normal break-word", width: 200 },]; const data = [ { name: "Line 1 Name", address: "Line 1 - 123 Sesame Street, Anytown USA", description: "This is a relatively short description, but should probably wrap in any case." }, { name: "Line 2 Name", address: "Line 2 - a really really really really really really really really really really Loong address", description: "This is a really really really really really really really really really really really really really long description, and needs to be wrapped." } ] </script> <style> body { @apply antialiased font-sans text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-900; } </style>

Additional context

No response

Logs