Bug Report: UI Error - Data Displayed Incorrectly in Supabase Table

[seckingyo]

UI error Unable to scroll and data in 3 columns of 1 row shown as 3 seperate rowsBug Summary: There is a UI issue in the Supabase platform where data that should be displayed in three columns of a single row is instead shown as three separate rows. Additionally, there is an inability to scroll through the table data, which further complicates the user experience.

Steps to Reproduce:

Open the Supabase platform and navigate to the table view where your data is stored.
Attempt to view a row that contains three columns of data.
Observe that instead of being displayed in a single row, each piece of data is displayed on a separate row.
Try to scroll through the table to view the entire content.

Expected Behavior:

The data should be displayed in three columns within a single row, as expected.
Scrolling should function correctly, allowing users to view all table content seamlessly.

Actual Behavior:

Data that should be contained in a single row across three columns is split into three separate rows.
Scrolling is not possible, preventing the user from viewing the full table data.

Impact: This bug significantly hinders the ability to correctly interpret data in the table view and limits usability, especially when working with large datasets.

Environment:

Supabase Version: supabase 3.8 docker



Browser: Chrome  127.0.6533.88
Operating System: Ubuntu 24.04

Additional Information:

The issue occurs consistently, regardless of the dataset size.
No error messages are displayed when the issue occurs.

Suggested Fixes:

Review the table rendering logic to ensure data is correctly mapped to its respective columns.
Address the scrolling functionality to allow users to navigate through the table data effectively.

Attachments:

https://github.com/user-attachments/assets/4c3bf1de-03e8-4d7e-9aa6-57229011d4fe

Priority: High

[M1ck0]

I encountered the same issue today with similar setup. Self-hosted

[GreenChiip]

Seems to be the CSS style that isn't loading correctly.. by using Stylish (Chrome / Firefox) you can bypass the styling and add the missing styles to the class from there.

.rnvodz57-0-0-beta-41 {
	display: grid;
	contain: content;
	content-visibility: auto;
	block-size: 350px;
	box-sizing: border-box;
	overflow: auto;
}

.rnvodz57-0-0-beta-41:before {
	content: "";
	grid-column: 1/-1;
	grid-row: 1/-1
}

hope this helps while we wait on a proper fix for this :)

[M1ck0]

@GreenChiip It works. Thanks

[Hallidayo]

Hi all - just checking in here, Is this issue happening on all of your tables or just certain tables?

[M1ck0]

@Hallidayo all tables

[GreenChiip]

It might be bad cashing somewhere. The problem is gone if i use IP or change the DNS. Dont know how to recreate it (yet), but i am getting the same issue when running it locally.

Edit: The issue is on all devices and browsers.

[Hallidayo]

Hi all - just checking in here, is this issue now resolved?

[Hallidayo]

Hi all, We’re going to close this one due to inactivity. Please feel free to reopen if you’re still having issues here or open a new issue.