Malformed table in narrow widths
Closed this issue · 6 comments
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
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.
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.
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:
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?
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.