Tailwind 4 and changes after table groups were added causes tables to not be full width

[robclancy]

Describe the Bug.

Tailwind 4 before this PR worked fine: #13138

A combination of tailwind changing the style for .table (I assume) and this PR adding 2 new divs wrapping the original .table table 100% width means that if you use tailwind 4 the tables are not full width.

payload/packages/ui/src/utilities/renderTable.tsx

Line 259 in a313627

className={['table-wrap', groupByValue !== undefined && `table-wrap--group-by`]

Pretty sure the most logical fix is just to add width: 100% to .table again which is what people on discord did.

https://discord.com/channels/967097582721572934/967097582721572937/1418154354833096715

Reproduction Steps

Use any collection with Tailwind 4.

Environment Info

> cms@1.0.0 payload /home/robbo/Projects/postedin/tbb-cms
> cross-env NODE_OPTIONS=--no-deprecation payload info


Binaries:
  Node: 22.13.1
  npm: 10.9.2
  Yarn: N/A
  pnpm: 10.12.4
Relevant Packages:
  payload: 3.76.0
  next: 15.4.10
  @payloadcms/db-mongodb: 3.76.0
  @payloadcms/email-resend: 3.76.0
  @payloadcms/graphql: 3.76.0
  @payloadcms/next/utilities: 3.76.0
  @payloadcms/plugin-cloud-storage: 3.76.0
  @payloadcms/plugin-multi-tenant: 3.76.0
  @payloadcms/plugin-nested-docs: 3.76.0
  @payloadcms/plugin-redirects: 3.76.0
  @payloadcms/plugin-seo: 3.76.0
  @payloadcms/richtext-lexical: 3.76.0
  @payloadcms/storage-s3: 3.76.0
  @payloadcms/translations: 3.76.0
  @payloadcms/ui/shared: 3.76.0
  react: 19.1.0
  react-dom: 19.1.0
Operating System:
  Platform: linux
  Arch: x64
  Version: #2 SMP PREEMPT_DYNAMIC Thu May  8 19:28:18 AEST 2025
  Available memory (MB): 64198
  Available CPU cores: 32

[magicspon]

add this:

@layer utilities {
	.table {
		display: block;
	}
}

[robclancy]

add this:

@layer utilities {
	.table {
		display: block;
	}
}

Yes I clearly know to do this considering I already mentioned it...

[magicspon]

Doh! Sorry missed that bit.