When investigating topic containers for mobile (T303362), we've noticed that the styling of section headings is currently implemented using display: table and display: table-cell, which makes it difficult to add content associated with the heading that would display on a separate line. It seems like they could be implemented using display: flex instead, which was not widely supported by browsers when this code was originally written, but it is now. A flexbox version would be easier to maintain in the long term, and it would also allow us to remove some workarounds in VE code (e.g. T202991).
Testing
This should result in no changes (regressions) to the look and behaviour of section headings on mobile, which usually consist of:
- An expand/collapse icon on the left (^/v), clicking on this or the heading should toggle the section
- The section title
- And section edit link (pencil icon), right aligned, which launches an editor at that section
Test on a few mobile devices (Android/iOS)
Scenarios to test:
- Normal page view
- Normal page view with non-collapsible sections (e.g. wrapped in <div>) (https://meta.m.wikimedia.org/wiki/Community_Wishlist_Survey/FAQ)
- Normal page view with non-editable sections (e.g. fully protected) (https://en.m.wikipedia.org/wiki/Latvia)
- Normal page view loading with slow connection (no content shifts/jumps)
- No-JS page view
- Visual editor (headings look the same as view mode, togglers and edit links are hidden)
- Editor loading animation (smooth transition from view to visual edit mode)
- Wikitext editor preview (togglers are hidden)
- Desktop Minerva (togglers are hidden, multiple edit links appear correctly)
- Other skins on mobile (sections are collapsible, nothing looks wildly broken)
- No regressions related to these issues: T106347 T202991 T229744