1737825 - Knowledge base topic/category tiles suddenly rearrange horizontally and become unreachable when reducing window width

Status: NEW

(support.mozilla.org :: Knowledge Base Software, defect)

Description

[Thomas D. (:thomas8)]

Attachment: SUMO-TB_tiles-trouble.mp4

STR

1. View the support start page of a product like Thunderbird or Firefox
   https://support.mozilla.org/en-US/products/thunderbird
   https://support.mozilla.org/en-US/products/firefox
2. Restore browser window to window size
3. Reduce the width of the window and watch the arrangement of topic/category tiles

Actual result (see screencast)

• at first, tiles resize and rearrange themselves vertically to adjust to reduced window width and remain visible
• starting from around half-screen width (even on a big monitor), all tiles suddenly jump into horizontal arrangement and original size in a single long row of tiles, so most tiles are now off-window (hidden).
• There is no horizontal scrollbar to reach the hidden tiles, so for most practical purposes, they are inaccessible.

Expected result

• Tiles should continue to rearrange/resize vertically, i.e. to change from 3-column layout to 2-column layout and reduced minimum tile width.
• All tiles must remain visible or scrollable within the browser window at all times.

Comment 1

[Kelimutu [:kiki]]

The tiles are scrollable on Mac, though there's no horizontal scroll bar, indeed.

Comment 2

[Leo McArdle [:leo]]

Nice catch - the page past that breakpoint was designed for tablet/mobile, hence the horizontal scroll which is only accessible through touch.

I think we ought to rethink that design a little. It was never particularly intuitive to me, and - at least on tablets - feels like it makes navigating harder as so much is hidden off screen when we still have so much screen estate that could be used.

At the very least, we should set the scrollbar to visible so it can be used on desktop. Most mobile browsers will hide the scrollbar or show it as semi-translucent anyway.

Comment 3

[Balázs Meskó]

The tiles are scrollable with Shift+scroll or middle clicking or with a touchpad. Anyway, a scrollbar is still necessary.

Comment 4

[Thomas D. (:thomas8)]

(In reply to Balázs Meskó from comment #3)

The tiles are scrollable with Shift+scroll or middle clicking or with a touchpad. Anyway, a scrollbar is still necessary.

• Desktop computers do not typically have a touchpad, so that doesn't help.
• Middle-click (where you get the compass) fails for me on the horizontal tiles, can only move page vertically (Win 10).
• Shift+scroll-wheel - thank you Balázs Meskó for teaching me this new trick!!! That works. Although, if I don't know it after all this time, and I've never needed it, I'm not sure if John Doe would know.
• OK, I just found that for mice whose wheel can be pushed sidewards for horizontal scroll, that works, too - however, many mouse wheels don't have that, and even my state-of-the-art Logitech MX Vertical ergonomic mouse does not have that, so we can't really rely on that.

Comment 5

[Thomas D. (:thomas8)]

(In reply to Leo McArdle [:leo] from comment #2)

Nice catch - the page past that breakpoint was designed for tablet/mobile, hence the horizontal scroll which is only accessible through touch.

Thanks for looking into this, Leo. Wow, alright, that explains the weird experience on desktop!

I think we ought to rethink that design a little. It was never particularly intuitive to me, and - at least on tablets - feels like it makes navigating harder as so much is hidden off screen when we still have so much screen estate that could be used.

Exactly that! Rethinking this design would be great.

• For desktop (at least) please consider re-arranging tiles in two-column layout before giving up on the vertical arrangement.
• The breakpoint comes way to early: I'm on a 27 inch screen with 1.10 or so dpi scaling factor, and reducing the window size to half screen-width already fails - whereas half-width will make a lot of sense for users who want to show Firefox/Thunderbird in one half and the step-by-step SUMO help instructions on the other half of the screen.
• Would it be possible to use @media CSS queries to distinguish between desktop and mobile layout? Combining the two can easily fail, as this bug shows.

At the very least, we should set the scrollbar to visible so it can be used on desktop. Most mobile browsers will hide the scrollbar or show it as semi-translucent anyway.

Horizontal scrollbar when there's ample vertical space would still be pretty odd on desktop (also because vertical is much easier to navigate just using mouse wheel), more like a bandaid-fix... I'm also wondering if we could be less wasteful with the vertical space of the whole page?

Comment 6

[Thomas D. (:thomas8)]

(In reply to Thomas D. (:thomas8) from comment #5)

Horizontal scrollbar when there's ample vertical space would still be pretty odd on desktop (also because vertical is much easier to navigate just using mouse wheel), more like a bandaid-fix... I'm also wondering if we could be less wasteful with the vertical space of the whole page?

Here's some ideas how to save vertical space for reduced window width scenarios:

• The Firefox/Thunderbird Logo could be re-positioned in front of "Thunderbird Support" title, which recovers an entire row of vertical space (ca. 2 cm).
• The "Frequent Topics \n Explore the knowledge base" and "Download Thunderbird" could remain side by side even as 2 columns with a bit of spacing, which recovers two rows, ca. 3 cm of vertical space.