Editing Module talk:Hatnote (section)

== Mobile styling ==

For a while now, hatnotes have had a somewhat different styling on mobile. Whereas at all resolutions we have the contents of [[Module:Hatnote/styles.css]]:
<syntaxhighlight lang=css>
.hatnote {
	font-style: italic;
}

/* Limit structure CSS to divs because of [[Module:Hatnote inline]] */
div.hatnote {
	/* @noflip */
	padding-left: 1.6em;
	margin-bottom: 0.5em;
}

.hatnote i {
	font-style: normal;
}

/* The templatestyles element inserts a link element before hatnotes.
 * TODO: Remove link if/when WMF resolves T200206 */
.hatnote + link + .hatnote {
	margin-top: -0.5em;
}
</syntaxhighlight>

on mobile we've had the following additional styles:

<syntaxhighlight lang=css>
.hatnote {
	padding: 5px 7px;
	color: var( --color-subtle ); /* this is a "mid" grey */
	font-size: @font-size-minerva-smallest; /* font-size: 0.8125rem; which on Minerva produces 13px text */
	background-color: var( --background-color-interactive-subtle ); /* this is a light grey */
	margin-bottom: 1px;
	overflow: hidden;
}

.hatnote a {
	color: var( --color-progressive ); /* not all that important the specific color */
}
</syntaxhighlight>

which produces a grey bar for your average hatnote (that stops at anything floating, but that's a non-issue there) and seems to cause some minor grief for various inline hatnotes (e.g. in the lead of [https://en.m.wikipedia.org/wiki/Wikipedia:Redirect]) that I am not going to spend too much time thinking about for this discussion. Notably, before we added TemplateStyles, these were the differences between what was on desktop and what was on mobile (from the mobile point of view):

* Hatnotes were straight text
* Hatnotes were not indented
* Hatnotes have a grey background
* Hatnotes have a lighter foreground
* Hatnotes have a smaller text.

I've been working with one of the WMF engineers on other matters (dark mode!) who introduced the idea of being able to configure some of the "hack" CSS that ends up on our pages, which would provide the option to remove the additional mobile styles at some point. Assuming that becomes an option, do we want to adjust any of our styles? Add the mobile only to desktop? Scrap them altogether? Pick and choose? [https://en.m.wikipedia.org/wiki/United_States United States] is pretty emblematic for the cases of top of page and of section (and multi top of section), and probably the only other case of interest is [https://en.m.wikipedia.org/wiki/Wikipedia:Citation_templates the multi-top of page hatnote]. (contrast [[United States]] and [[WP:Citation templates]]). (We could override the ones we don't like even on mobile today if we wanted, but this just introduces more CSS for negligible benefit to anyone.)

(Brief history: It looks like the styles were added as part of rellink/dablink (classes we no longer use) [https://phabricator.wikimedia.org/rEMFRca26dee1daca1f7bfbb9af4859be7427c128c7c9#change-yqJy2NPI4RsE in 2014] (around the time MF was getting some overhaul or even creation! I think), hatnote in [[phab:T91160]] in 2015, and then some rework done in 2017 in [[phab:T173600]]. I'm not sure how much of this CSS was design and how much was "oh that looks nice".) [[User:Izno|Izno]] ([[User talk:Izno|talk]]) 07:20, 8 April 2024 (UTC)

:The smaller text with lighter foreground is easy to miss. It reminds me of image captions (for which article [https://en.m.wikipedia.org/wiki/United_States United States] is also a good example). I think that some hatnotes, like {{tl|main}}, need to be more prominent to the reader.
:As a reader, I would also like to have more consistency between mobile and desktop. I read more on desktop, and my pattern recognition for isolating the hatnotes doesn't work as well on the mobile version.
:With the above in mind, I wouldn't mind scrapping the additional styles on mobile. —⁠[[User:Andrybak|andrybak]] ([[User talk:Andrybak|talk]]) 20:10, 30 May 2024 (UTC)
:Looks like something related to mixing of mobile vs desktop styles for hatnotes has been deployed – [[Wikipedia:Village pump (technical)#Thursday 13 June style changes]]. —⁠[[User:Andrybak|andrybak]] ([[User talk:Andrybak|talk]]) 19:47, 13 June 2024 (UTC)