Site Health: Table design issue in small devices(iphone 5/SE).

[immeet94]

Table does not looks good under accordion in Site Health Info section for small devices. I have attached screenshot.

[immeet94]

Please see this file for the issue.

[Clorith]

Tables are not the best on responsive designs in the first place.

I'm not sure this is worth putting too much effort into for 5.2, as it's not a general page for casual browsing in the first place.

I'd be happy looking to tackle this for 5.2.1 if anything, where we can look at adding some responsive styling for tables, but with just two columns, you are very much controlled by the content of the columns them selves. We should try to take care so we don't disrupt the data or misrepresent it after all. One idea may be to add overflow styles for the x-axis to allow scrolling within the table on smaller devices.

[jankimoradiya]

Hello @immeet94,

I have solved above issues by adding css which is mention in #46960.diff file.

Please review #46960.diff file.

Thanks

[immeet94]

update patch

[immeet94]

Hi @Clorith

i follow your suggestion and create patch so please review it.

Thanks.

[immeet94]

Hello @jankimoradiya

i try you patch and it's working fine for me. Thanks for help !!

Thanks

[afercia]

#47179 was marked as a duplicate.

[desrosj]

I tested #46960-1.diff​ and #46960.diff​, but they did not seem to fix the problem for me.

46960.diff​ copies over the patch that @shashank3105 created on #47179. I have better results testing this patch.

[immeet94]

Please see this file for updated patch.

[immeet94]

Hello @desrosj

I update patch and its works for me,so please check the patch and test it.

Thanks.

[afercia]

One idea may be to add overflow styles for the x-axis to allow scrolling within the table on smaller devices.

Not sure that would be a great user experience, as scrolling horizontally is very annoying on mobile. Not to mention it's extremely difficult for keyboard users and ​many screen reader users use a keyboard when using their mobile devices.

Worth noting the root cause of the issue is not just the use of tables. Non-breakable words and long URLs/paths make the table cells wider. See attached screenshot on the left.

Even using something like word-break: break-all; wouldn't help so much because the content would be mostly unreadable. See screenshot on the right.

I'd tend to think the only option is to transform the table layout in vertically stacked blocks. From a semantics / accessibility perspective there wouldn't be loss of information because these tables are only used for layout and have an ARIA role="presentation".

[desrosj]

I also wanted to call out that there are implications for CJK (Chinese/Japanese/Korean) languages with different word-break values that we need to consider.

#46960-2.diff​ also did not fix the issue for me. I found inconsistent documentation for break-word as a value for word-break. My testing was in Firefox. break-all was the only way to fix the issue consistently, but as @afercia noted, this is not the best experience as many times it would render the content unreadable.

[shashank3105]

Hello @desrosj and @afercia,

I have updated code for this issue and work for me. So can you please check my revised code in attached patch file and screens.

Thanks,
Shashank

[shashank3105]

Patch file for this issue

[Clorith]

#46960-shashank-update.patch​ moves everything to be multiple lines regardless of the viewport size, this isn't a good user experience.

As @desrosj mentions, word-break can do weird things for various locales, so let's avoid that.

Are there any major issues with taking the overflow-x: auto approach? (This essentially lets you scroll horizontally if it overflows, the only downside is that there's no scrollbar to indicate this possibility on handheld devices, but I believe it's so ingrained that you can swipe sideways to read remaining text on these that that may not be an issue?)

[afercia]

Are there any major issues with taking the overflow-x: auto approach?

See comment:14. Also, as you point out (and depending on user settings) on some OSes there's no visual indication something can be scrolled horizontally.

[chetan200891]

Updated patch to fix table layout for small devices.

[chetan200891]

Updated patch to fix table layout for small devices. (Missed box-sizing)

[afercia]

Thanks all for the patches, they seem a good start to me. Worth noting some long URLs and paths break in a new line only because they contain a hyphen. When they don't, long, unbreakable lines still overflow from the table:

There are ​inconsistencies in the way browsers support CSS properties to break long lines. More importantly, seems some of these CSS properties don't work for table cells.

Quickly testing in Chrome, seems to me there's the need to:

• set table-layout: fixed; on the table
• set word-wrap: break-word; on the table cells

Some testing on other browsers would be nice :)

Also noting this ticket still needs some design feedback /Cc @hedgefield @Clorith

[chetan200891]

Updated patch.

[chetan200891]

@afercia Thanks for your suggestion. I have updated patch 46960.4.diff. I have tested in Chrome, Firefox and Safari on Mac OS. Looks good to me.

[hedgefield]

Sounds like a good first step to me; complex tables just aren't easy to do on mobile. Shall we go with the latest patch? We can iterate afterwards and try more extensive tweaks to the table if need be.

[desrosj]

Thank you, everyone, for your work on this!

This looks good in my testing. Marking this as commit, but I'd just like to get @afercia's sign off as well.

[audrasjb]

Hi,I tested this one on my side and it works well. I think this one is good to go orf 5.2.2.

[chetan200891]

Just a thought, how about removing bottom-padding for first-child td?

[afercia]

Looks good to me, thanks all! Just a quick note: although ​the CSS coding standards mention 700 as value for the bold font weight, core uses 600 and for good reasons. See for example #43897, [37740], #36753. The coding standards should be updated.

@chetan200891 padding-bottom: 0; for the first child cell makes sense, it improves readability by connecting visually the related cells. Updated in 46960.5.diff​.

[afercia]

In 45463:

Administration: Improve the Site Health tables layout for small screens.

Props immeet94, jankimoradiya, desrosj, shashank3105, chetan200891, Clorith, hedgefield.
Fixes #46960.

[afercia]

Reopening for 5.2.2 consideration.

[audrasjb]

Hi @afercia do you think we can have a backport for this ticket today so we can ship that on 5.2.2 RC1?
Thank you! The RC processing is going to start at 19:00 UTC.

[afercia]

In 45514:

Administration: Improve the Site Health tables layout for small screens.

Props immeet94, jankimoradiya, desrosj, shashank3105, chetan200891, Clorith, hedgefield.

Merges [45463] to the 5.2 branch.
Fixes #46960 for 5.2.2.