Skip to content

Reapply table-layout fixed in repository file list

Samantha Ming requested to merge 341851-reapply-table-layout-repo-file-list into master

What does this MR do and why?

A. In this recently merged MR > !69445 (merged), we removed the table-layout: fixed to solve this problem.

B. However, this class needed to prevent CLS (Cummulative Layout Shift) -- notice the column shift 😱

before

So, in this MR, we re-apply the table-layout: fixed. BUT we only added it for the file list that doesn't contain ... as the first row.

Reapply "gl-table-layout-fixed" Leave out "gl-table-layout-fixed"
image image

Follow up Issue

HOWEVER! by removing the table-layout: fixed, our CLS does return 😓. So we should explore how to address this for file list with directories. Let's solve this iteratively and fix it in a follow-up. At least with this MR fix we don't have CLS for files list that doesn't contain ....

If you're wondering why table-layout: fixed won't work for files with ... > #341851 (closed)

This causes invalid columns widths on mobile devices because table-layout: fixed calculates widths just once using the first available row which is the row with the button Go up.

#341876

Screenshots or screen recordings

These are strongly recommended to assist reviewers and reduce the time to merge your change.

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Related to #341851 (closed)

Edited by Samantha Ming

Merge request reports