Don't hide the Help tab on small screens

[afercia]

#40985 is going to make the Screen Options tab available also on small screens, as hiding it in the responsive view prevents access to important options.

In the same way, there's apparently no good reason to hide the Help: users need the Help content also on small screens. The current behavior is probably inspired to the first days of the responsive design, where hiding features to "remove clutter" was considered a viable approach. Today, better responsive design transforms the UI without hiding features.

I'd like to propose to try to find a way to keep the Help tab toggle visible also on small screens. Worth noting the Help panel content and the Screen Options content (as mentioned in #40985) would need some improvements for the responsive view, but that's out of the scope of this ticket.

[xkon]

Show Help Tab and add some responsive css fixes

[xkon]

Preview 1 of 43221.diff

[xkon]

Preview 2 of 43221.diff

[xkon]

43221.diff gives it a shot on making the Help tab visible on devices under 768px width.

Also it adds some minor css edits to make the text responsive as well.

The 'Help Tab Sidebar' that includes the links to Forums etc was actually 2nd in place as a div so I made it hidden for small devices to not interupt the flow of 'title -> content', but we can figure that out in the future I guess if we want to show it as well on small devices.

[printsachen1]

@wcretreat in Germany at the Contributing we are looking at this ticket.
We think it's helpful and works on mobile.

[jobthomas]

Works well - just added a bit of spacing below the links to not squash the "Add new" button below the title on wider mobile screens.

[pento]

Thanks for the updated patch, @jobthomas!

It looks like menu items are slightly too wide of the container: the right edge of the selected item border is cut off.

[jobthomas]

@pento it actually wasn't the width, but a combination of the margin and the overflow of the container. I've updated that and changed around some margin and padding to prevent the overflow: visible adding white space at the top.

[jameskockelbergh]

I think that this solution works well. Good job.

Replying to jobthomas:

Works well - just added a bit of spacing below the links to not squash the "Add new" button below the title on wider mobile screens.

[JoshuaWold]

I agree with moving the add new button to the new location. That looks great!

[boemedia]

Tested the last patch, looks good to me!

[afercia]

Looks good to me. Was only wondering why the relevant CSS is already in a media query based on 771px while the switch to the responsive view happens at 782px. Guess it's a leftover and this change https://core.trac.wordpress.org/changeset/29125 has to do with it, it was related to the plugin banners /cc @ocean90

[pento]

In 44588:

Admin: Make the Help tab available on small screens.

Props jobthomas, xkon.
Fixes #43221.

[afercia]

In 44604:

Admin: Use the correct CSS media query for the Help tab on small screens after [44588].

See #43221