canonical/microk8s.io

Malformed table in narrow widths

Closed this issue · 6 comments

sed-i commented

Summary

The table in https://microk8s.io/compare gets malformed when browser window is narrow, or on mobile (even in landscape mode).

Process

Go to https://microk8s.io/compare and reduce width, or open https://microk8s.io/compare on a mobile device.

Current and expected result

Table is entirely restructured and headers are dropped - can't tell which is which.

Screenshot

Wide enough:
ok

Slightly too narrow:
malformed

Browser details

Including but not limited to:

  • Firefox 97.0.1 (64-bit) - Snap for Ubuntu

@davegoddard42 I have removed the mobile-card class from the table so it retains the same style and I think it is still very readable. Is this what you had in mind? you can see it here: https://microk8s-io-509.demos.haus/compare

@petesfrench - there's some cut off on mobile resolutions of longer words - the elipsis (...) is used which isn't great.

image

Is there a simple way to tackle that? Or do I need to look into some solutions?

The mobile-card class has other issues too - it removes the column titles, so a user wouldn't know which row aligns with which product. So we definitely shouldn't be using that either, in this instance.

image

My current thinking is that we make use of the mobile-card class, but only for very small screens (mobile devices) and we somehow include the column header in the card.

@davegoddard42 so I updated the pattern to vanilla-3.0 and that has changed it to look like this:
image
Is that any better or still not quite right?

@petesfrench yes - that's much better. But I think the breakpoint where it switches to card mode isn't right. It looks fine as a table until the words start using ellipsis (about 485px width I think?). Is the breakpoint set in the class?

@davegoddard42 it is set in the class, but you are right that is too big for mobile. I will raise it as an issue on vanilla, as that should probably be changed to 485px. Should we merge this how it is and when vanilla is updated the table should be to? Or do you think this needs a fix now?

canonical/vanilla-framework#4355

Apologies @petesfrench for the late reply. I think we should merge it as it is now, as it does solve the issue in question. We can revisit once vanilla is updated.