Just using the standard category output, with appropriate styles added, would solve several bugs, including T181344, T175713, and possibly T186089 & T175716.
However, desktop-small and mobile views should really avoid doubling up on categories in the html -- otherwise, it would result in multiple elements with id 'catlinks', and probably cause HotCat to only work with the first one it found. Unless there's some better approach, or reason to
do so, I propose treating the categories sidebar chunk like the others:
* Desktop-small: Heading goes up to the top of screen, contents available via hover -- which can be styled to take up the full width of screen, with multiple items per line (rather than one-per-line, like in the views with sidebars)
* Mobile: An icon shown at the top of screen, contents shown on click
I have experimented with this in https://gerrit.wikimedia.org/r/#/c/430854/ .
Open questions:
* Are the mobile/desktop-small approaches acceptable?
* What should the icon be for mobile view?
** Something similar to https://commons.wikimedia.org/wiki/File:OOjs_UI_icon_tag.svg ?
* Where should HotCat-specifc styles go?
** Probably in HotCat itself, but they are only needed (or rather, not needed) for certain viewport widths -- so if the mobile/desktop small cuttoff values ever get changed, then that's another place where they need to be updated. Unless there's a way to make the cuttoff values available to the HotCat script?
Also relevant: {T160645}