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 duplicate ids ('catlinks', 'mw-normal-catlinks', 'mw-hidden-catlinks'), and probably cause HotCat to only work with the first 'catlinks' id 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}