Support forum should have better styling on mobile (6.44′ screen)

[alkesh7]

Hi guys,

I noticed some issues with wordpress.org support forum with my Mi Max smartphone (screens size - 6.444').

Gravatar image showing outside the content, ​http://prnt.sc/eu2eey

There are lots of issues, not only single one that I have listed above. Someone need to play with the same smartphone and access whole wordpress.org site

Regards,
Alkesh

[kjellr]

👋 I spent a little time thinking about some light adjustments to help the forums behave better on mobile. Here are some comps along with some specific notes:

---

Landing Page:

• The Create Issue / Pagination should be stacked.
• Pagination should be wider and (at least a little) taller to be more amenable to touch interfaces.
• The entire content width could be widened a bit to take advantage of the smaller available space.
• The "Pinned" and "Resolved" icons should hang off to the left of the text, rather than simply being inline.
• On the smallest screens (320ish), the table headings do not line up with the content. We should rework to include those inline instead.

---

Individual Topic

• In general, tighten up margins to make better use of space.
• Like the landing page, we should widen the content area a little bit.
• Reduce the font size of the title, for better line lengths.
• We should tighten the extra-tall line height for the breadcrumb.
• Make the avatars smaller and stack the "Resolved" tag.
• Add larger body font sizes for improved readability.

[melchoyce]

These look great, @kjellr 👍

[dufresnesteven]

Improve: Pagination control on smaller viewports.

[dufresnesteven]

Current layout of the pagination component.

[dufresnesteven]

Updated Layout

[dufresnesteven]

I updated the pagination control to be more mobile friendly in: 2822.diff

Images above.

Regression Testing Matrix

OS	Browser	Support
WIndows 7	IE 9	✓
Window 8	IE 10	✓
Window 8	IE 11	✓
Window 8.1	IE 11	✓
Window 10	IE 11	✓
Window 10	Edge	✓
Android Galaxy 9	Firefox	✓
MacOS Mojave	Safari 12.1	✓

[dd32]

In 9620:

Support: Better styling for pagination on smaller screen widths.

Props dufresnesteven, kjellr.
See #2822.

[SergeyBiryukov]

[9620] has introduced a regression in replies pagination inside a topic, as seen in ​this topic for example.

The replies count is overlapping with the page links, see 2822.pagination-count-misaligned.png​. Previously, it used to be aligned to the left.

[dufresnesteven]

Replying to SergeyBiryukov:

[9620] has introduced a regression in replies pagination inside a topic, as seen in ​this topic for example.

The replies count is overlapping with the page links, see 2822.pagination-count-misaligned.png​. Previously, it used to be aligned to the left.

Great catch. I'll submit a patch.

[dufresnesteven]

Patch to fix regression of "Viewing" alignment.

[dd32]

In 9696:

Support: Fix the alignment of the "Viewing" text inside topics when multiple pages exist.

Props dufresnesteven, SergeyBiryukov.
See #2822.

[dd32]

In 9697:

Support: Restore some styles removed in [9696] by adding a missing SCSS file from [9664].

See #3659, #2822.

[Clorith]

Are there any steps missing from this ticket, I see it still has the needs-ui flag, is this something actively being worked / in the pipeline still, @kjellr ?

[kjellr]

I haven't kept up on this ticket, and I'm not actively working on this personally. It looks like the only thing that was implemented from my recommendations a couple years ago is the pagination. There are still a number of other bullet point recommendations I made above that I think could still be implemented if someone has the time.