Grid Field with UI Mode: Table displayed incorrectly

[stuartcusackie]

Bug description

Here is a screen of my original Statamic 5 Grid field. Note that it is in 'Table' UI mode and it is easy to edit, which is important because we have 50 timetables that change every day:

Here is how it looked after following the Statamic 6 upgrade guide. Note that every row is Stacked and each field is 100% width

Here is the fieldset configuration after the upgrade. Note that selecting UI Mode "Table" has no effect.

The Grid field is very important for this website. The Table field is unsuitable because you cannot predefine the structure.

I have also tried creating a brand new grid field, in case my legacy config was affecting it, but it had the same results.

How to reproduce

Upgrade a site with a Grid field in UI mode Table to Statamic 6

Logs

Environment

Environment
Laravel Version: 13.12.0
PHP Version: 8.4.13
Composer Version: 2.9.2
Environment: local
Debug Mode: ENABLED
Maintenance Mode: OFF
Timezone: Europe/Dublin
Locale: en

Cache
Config: NOT CACHED
Events: NOT CACHED
Routes: NOT CACHED
Views: CACHED

Drivers
Broadcasting: null
Cache: file
Database: mysql
Logs: single
Mail: smtp
Queue: database
Session: file

Storage
mysite\public\storage: LINKED

Livewire
Livewire: v3.8.0

Statamic
Addons: 9
License Key: Set
Sites: 1
Stache Watcher: Enabled
Static Caching: Disabled
Version: 6.20.0 PRO

Statamic Addons
jacksleight/statamic-bard-texstyle: 4.1.0
marcorieser/statamic-live-search: 3.2.0
marcorieser/statamic-livewire: 5.3.1
ndx/statamic-bard-color-picker: 3.0.0
rias/statamic-redirect: 4.1.10
spatie/statamic-responsive-images: 6.2.0
statamic/seo-pro: 7.9.2
stillat/relationships: 2.4.0
stuartcusackie/statamic-cache-requester: 1.3.2

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

[jaygeorge]

I think you're just seeing the mobile view, where the Grid switches to either a stack or table so things are still readable.

Around 720px it becomes a conventional table

For example, here around 575px wide it switches to a stack

And below 570px, where it switches to cards

[jaygeorge]

I'll close this issue for now but please leave a comment if you still think there's an issue :)

[stuartcusackie]

Ah, you're right. I was seeing this issue on my 13" laptop where everything was fine on Statamic 5, but Statamic 6 needs an additional 45px or so, which is down to the grey panel borders and extra grid gaps.

Stacked mode is also engaged at the the following desktop breakpoints:
Statamic 6 @ 1314px
Statamic 5 @ 1270px (works better on small laptops)

I can just toggle the CP sidebar to get around this but I doubt all of my users will figure it out. I'll re-open the issue if I get any complaints.

Perhaps there's room for improvement by reducing the grid gaps and panel padding on smaller screens. I wonder if a field option to disable stacking completely would be good, i.e. just force a horizontal scrollbar on the table instead.

Thank you.

[jaygeorge]

Hi @stuartcusackie – I believe v5 used a straight-up viewport unit but v6 measures the container which is probably why you're seeing different behaviour.

I've lowered this so that Grid table mode should be activated more often. Let me know if this works out for you!