1943914 - Long test name can cause columns to be misaligned

Status: NEW

(Testing :: PerfCompare, defect, P2)

Description

[Nicolas Chevobbe [:nchevobbe]]

Attachment: misaligned columns

Steps to reproduce

1. Go to https://perf.compare/subtests-compare-results?baseRev=632d1b46eeba0e6950cb84fd950eceb086142d23&baseRepo=try&newRev=7c9e39d87387c3ed4c829ad5300ceb13705026e0&newRepo=try&framework=12&baseParentSignature=59287&newParentSignature=59287&sort=delta%7Cdesc&filter_status=improvement%2Cregression

Expected results

Columns of the 2 rows are aligned

Actual results

They're not, see attached screenshot

Comment 1

[Julien Wajsberg [:julienw]]

Currently the column widths are decided using the "fr" unit in a grid layout. I don'tk now the grid layout that well, but we might want to prevent this column from growing and use either an ellipsis or a break-word?

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Julien Wajsberg [:julienw] from comment #1)

Currently the column widths are decided using the "fr" unit in a grid layout. I don'tk now the grid layout that well, but we might want to prevent this column from growing and use either an ellipsis or a break-word?

It looks like each row has its own grid, so the fr unit will react differently depending on the content of each column.

One thing that would replicate a table more accurately would be a parent grid + subgrid. You could move the current grid on the parent of the rows, then place the child on the whole row with grid-column: 1 / -1, and set them as a subgrid, e.g.

.css-10qup14 {
  grid-template-columns: 4fr 1fr 0.2fr 1fr 1.5fr 1fr 1.8fr 1fr 34px 34px;
  display: grid;

  & > * {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
  }
}

(those classes seems auto generated, .css-10qup14 is basically the parent to the header and the rows)

Then it looks like you could have indeed some overflow or text wrapping, and probably some media/container query to support narrower screen sizes, but from my quick experiment that fixes the issue I reported

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The severity field is not set for this bug.
:carla, could you have a look please?

For more information, please visit BugBot documentation.

Comment 4

[Julien Wajsberg [:julienw]]

One thing that would replicate a table more accurately would be a parent grid + subgrid. You could move the current grid on the parent of the rows

With a parent grid, it makes non-row content a bit painful to work with (such as the expandable row) IMO. It also makes it more difficult to work in the same way for the subtests page vs the main page (where the table is virtualized).

I've seen that using overflow: hidden on the subtests cell was preventing it from growing. (or using minmax(0, 4fr) instead of 4fr, but then we'd still need overflow: hidden to avoid text going over the next cell, so I think just overflow: hidden is good enough).
But I couldn't make the ellipsis work for an unknown reason.