Fix: Make generated Main Page responsive on mobile

Nik Gkountasrequested to merge
fix/main-page-mobile-responsive-T429067 into main

The generated Main Page broke on small screens: module rows were laid out two-up with inline flex but no wrapping, and the category navbar used a fixed-percentage-width table. Both squeezed content into unreadable slivers on phones instead of adapting. (T429067)

Layout rows (wikitext-generator.js generateMainPage):

  • Add flex-wrap:wrap to row containers and change columns from flex:1 to flex:1 1 300px, so 2-up rows stay side-by-side on tablet/desktop and stack full-width on phones. Pure inline change — no media queries, no new publish machinery, and no risk of a TemplateStyles error on the live main page.

Category navbar (wikitext-generator.js + template-registry.js + api.js):

  • Replace the with a semantic flex layout that wraps onto multiple rows on narrow screens, styled via a TemplateStyles subpage instead of inline CSS (per the task's suggestion). Cell colours cycle through the five palettes via :nth-child, matching the previous table colouring.
  • Add generateNavbarStylesContent() (the CSS) and _navbarStylesSrc() (resolves the stylesheet title, honouring the User: prefix used on test wikis so the matches the page init creates).
  • Register a { generated: true } CSS subpage for content-categories; create it in-code on /templates/init and inline it into the /preview block so preview matches the published result.

Not changed: /templates/init remains create-only (it never overwrites an existing template, to protect editors' translations). Wikis whose Content categories template already exists must delete it before re-init to pick up the responsive navbar; the layout-rows fix reaches them regardless since the main page itself is always overwritten on publish.

Co-Authored-By: Claude Opus 4.8

Bug: T429067

Edited by Nik Gkountas

Merge request reports