Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Tables are hard to read in small viewport #38

Closed
tophf opened this issue Dec 9, 2020 · 5 comments
Closed

Tables are hard to read in small viewport #38

tophf opened this issue Dec 9, 2020 · 5 comments
Assignees
Labels
bug Something on the site is broken!

Comments

@tophf
Copy link

tophf commented Dec 9, 2020

https://developer.chrome.com/docs/extensions/mv2/permission_warnings/

The current width is:

.measure-long {
  max-width: 79ch;
}

It wastes 50% of available space and makes some of the content almost completely unreadable. The extension documentation has pages with very wide and deeply nested tables so the overall content width shouldn't be limited at all or it should be a much bigger value.

image

@samthor
Copy link
Contributor

samthor commented Jan 5, 2021

Thanks for your feedback. Your solution could work on desktop but we have the same problem on small screened devices.

We're going to consider how we can potentially relayout this content where we have a small viewport to display it in.

@samthor samthor changed the title Content width must be increased Tables are hard to read in small viewport Jan 5, 2021
@tophf
Copy link
Author

tophf commented Jan 5, 2021

FWIW, if the mobile devices constitute only a negligible portion of views you could go with this trivial solution of increasing the width first, then fix it properly in the future...

@robdodson robdodson self-assigned this Jan 14, 2021
@robdodson
Copy link
Contributor

I think there's an easy thing we can do to really improve this page. Our lists currently have left/right margins applied to them so they appear inset when they're inside body copy. But we're not removing those margins when lists are inside of tables so they're getting crushed.

Here's the above screenshot if we remove the margins.

image

I bet there's more we can do to improve the appearance of text inside of tables. I just did some fairly baseline styles for them but now that they have a lot of real and varied content, we can tweak things.

I don't think we should increase the overall line length of the page much (though we could bump it up a tad if folks want). But you don't want line lengths to run longer than around 60-80 chars because it becomes harder to read (the eyes struggle to read text on very long lines).

Wikipedia is a good example of a site that does this poorly. They don't constrain line lengths at all, so you end up with this:

image

Compared to something like Medium which constrains the line length to something like the 60-75 char range and is easier to read.

image

@robdodson robdodson added the bug Something on the site is broken! label Jan 21, 2021
@tophf
Copy link
Author

tophf commented Jan 21, 2021

Indeed, Wikipedia is unreadable without a custom userstyle, but the blog example is also not ideal as 79 characters is too little for documentation, which is not a short blog article, it's a technical reference with complex formatting.

@tophf
Copy link
Author

tophf commented Mar 9, 2021

The original problematic table is readable now so I guess this issue can be closed.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
bug Something on the site is broken!
Projects
None yet
Development

No branches or pull requests

3 participants