chore(dashboard): adjust prebuild table col width

[andreafalzetti]

Description

The Prebuilds page not always align correctly the columns, e.g. see screeenshot below:

I think this small CSS change could improve already some scenarios.

Related Issue(s)

N/A

How to test

1. Start the dashboard for gitpod.io

(I would also suggest Prev Env, but there are no prebuilds there)

Before	After

Release Notes

NONE

[geropl]

@AlexTugarev Could you review this PR (tomorrow)? 🙏

[jankeromnes]

Happy to take a look 👀

[jankeromnes]

/werft run

👍 started the job as gitpod-build-afalz-webapp-prebuilds-col-width.3
(with .werft/ from main)

[AlexTugarev]

It would be great to not overshoot at md.

[jankeromnes]

Tip for the future: Using CSS grid is much more powerful and robust in these situation than trying to guess good fixed widths.

With grid, you can simply specify "I want three columns of exactly the same width", or specify custom relative column widths, but they'll almost always be correct regardless of screen size, margins, size of content, etc.

[AlexTugarev]

@jankeromnes, are you still looking at this? This seems to fix a bigger issue, and I'm keen to merge it as is. wdyt?

[jankeromnes]

Ah, yes, thanks for the reminder. Triggered a build then forgot about this.

Resuming review now. 👀

[jankeromnes]

Thanks a lot for improving our Prebuilds list! ✨

I tested this change at various resolutions, and with various commit messages / branch name lengths. I think the current implementation is still not perfect (e.g. might need an ellipsis + tooltip on the branch name) hence the hold, but please feel free to merge this when you like (this is easy to adjust later as well).

FYI, here are my test results:

My normal screen size	Max screen size	Smartphone (>50% of web users)	iPad (portrait)

Tip: To automatically add an ellipsis to a potentially super long cell (e.g. the branch name), you can add:

• the truncate CSS class
• a title attribute with the exact same text content as the element (so that users can still hover over the truncated text to see the full text)

See also how the commit message is truncated for inspiration.

/hold

[jankeromnes]

Oh, wait, I wonder if #10472 maybe already fixes the same issue? 👀

Looks like we may need a overflow-hidden in addition to the truncate class. 💡

[akosyakov]

should be merged or closed?

[gtsiolis]

I'd suggest getting this merged as it's already a good MVC improvement, regardless if the rendering on small (mobile) viewports looks great, leaving this for #4050.

If that's useful, I'd like to help get #10472 also merged afterwards.

[akosyakov]

@jankeromnes @AlexTugarev is it alright to remove hold?

[jankeromnes]

Hi! Yes, and sorry for sitting on this for so long.

@gtsiolis's comment makes a good case or merging this. 👍 Thus, removing the hold.

/unhold