Workaround in https://en.wikipedia.org/w/index.php?title=MediaWiki:Vector.css&curid=23480830&diff=1134508520&oldid=1120762699

I've moved that one to the correct page which is [[MediaWiki:Vector-2022.css]].

So, this has a harsh impact on the Shortcut template. See for example

I can either recommend a similar change be limited to small screen sizes @media ( max-width: 719px ) or I can flip the expectation in that template to never break in TemplateStyles or hack it to allow breaks with <wbr> or similar at reasonable places (slashes and the colon). The TemplateStyles option is probably the more "hurts my soul" end state because at some point mbox templates will be divs and then I'll have to fight with how flex deals with images in the responsive skins.

I've modified the CSS in Vector-2022.css in the meantime to be the first option.

Hmm. how come shortcuts are external links ?

In T327334#8541790, @TheDJ wrote:

Hmm. how come shortcuts are external links ?

They're all redirects with &redirect=no. If there's a way to do that with an internal link I'd take it. :)

We can target a[rel="nofollow"] i guess. those should be true external links. Or a.external.free (plainlinks with not display text ?)

Some other things I can think of:

1. I think we have some links to other wikis in shortcuts lying around. I can't be certain of that.
2. Timeless has mostly gotten away without it.
3. Maybe the parser could add a naked class when the wikitext has no inner text set?
4. I've had to fix a few copy-pasted-from-URL internal links as well that were quite lengthy, mostly because the URL has been more convenient to get to than the page title. I do that myself. It might be less an issue now that we have the floating title for V22?

Maybe the parser could add a naked class when the wikitext has no inner text set?

I suspect that is what the .free class does. But i have trouble dechiperhing the parser on this front. its a gigantic set of options and possibilities.

Is this related to T327886 ? Do we need a more general solution than just links?

In T327334#8541771, @Izno wrote:

So, this has a harsh impact on the Shortcut template. See for example

@Izno I was thinking a bit more about why this was happening... And some inspection shows that this is in part, a side effect of a trick that the table does. Basically, because the text cell tries to be 100% (per the requested styling), it will force the right cell to become as small as possible, even though there is space available. This could be fixed by converting mboxes to flex, or we can tell the browser to not apply this word breaking on tables (because it also has negative effects on wiki tables etc).

Currently I'm running with the following settings:

.mw-body-content {
	 -webkit-text-size-adjust: none;
	 text-size-adjust: none;
	 word-break: break-word;
}
.mw-body-content table {
	 word-break: normal;
}
a.external.free {
	word-break: break-all;
}

TheDJ's assessment seems pretty accurate, however changing word-break has caused us issues in the past across browsers (I can't find the task but there was such an instance on diffs), so it seems wise to think more deeply about this given this currently only impacts mobile users on select pages. @Izno perhaps we could try out TheDJs CSS rules in a logged in gadget to get them more battle tested before adding to MediaWiki core?

side effect of a trick that the table does

@TheDJ well of course the fact we're cheating is causing it. :) (It's not the only one specifically tied to the cheat that's shown up in the past few week, had to back and forth with Matma for the display-the-lead talk page work.)

That CSS posted there looks good to me to deploy either as some sort of gadget or even directly to core.

In T327334#8569273, @TheDJ wrote:

Currently I'm running with the following settings:

.mw-body-content {
	 -webkit-text-size-adjust: none;
	 text-size-adjust: none;
	 word-break: break-word;
}
.mw-body-content table {
	 word-break: normal;
}
a.external.free {
	word-break: break-all;
}

I've been running with these settings for about a month now and have not encountered many problems. I think it is a vast improvement and at least the link breaking a.external.free change should be implemented ASAP.

Change 892051 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/skins/Vector@master] Vector: Break long bare external links

https://gerrit.wikimedia.org/r/892051

Change 892053 had a related patch set uploaded (by TheDJ; author: TheDJ):

[mediawiki/skins/Vector@master] Set word break for the entire content area

https://gerrit.wikimedia.org/r/892053

Test wiki created on Patch demo by TheDJ using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/42ba885d68/wiki/Taumatawhakatangi­hangakoauauotamatea­turipukakapikimaunga­horonukupokaiwhen­uakitanatahu

The example I gave in T329063 is now working better.

Change 892051 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Vector: Break long bare external links

https://gerrit.wikimedia.org/r/892051

I suspect the issue here is mw:Help:CirrusSearch#How_frequently_is_the_search_index_updated? Which is not a .free link

Will take a look. Cc @TheDJ

Change 895370 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Break words for long links

https://gerrit.wikimedia.org/r/895370

Change 895370 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Break words for long links

https://gerrit.wikimedia.org/r/895370

@Jdlrobson Do you have opinions on disabling text inflation algo altogether ?

On the one hand, it makes the sizing match what you might expect as desktop user on mobile. On the other hand, it does increase readability of the desktop site when viewed on mobile.

Examples of VP/T with and without text inflation on an iPhone 14 Pro:

Could you post the URLs used to generate those? I tried scaling them to phone-size on my desktop, that's not a good comparison because the desktop's monitor doesn't have anywhere near the resolution my phone has.

@TheDJ personally I'd like to make progress in making Vector a fully responsive skin to solve that particular problem, particularly given users of the desktop site on mobile seem to expect different things around information density/font-size and are sensitive to any changes there.

In T327334#8676497, @RoySmith wrote:

Could you post the URLs used to generate those?

which ?

You posted two screenshots (IMG_7394.PNG and IMG_7395.PNG). How did you generate those, i.e. what do I have to do to view those two different versions of the page on my phone?

In T327334#8677793, @RoySmith wrote:

You posted two screenshots (IMG_7394.PNG and IMG_7395.PNG). How did you generate those, i.e. what do I have to do to view those two different versions of the page on my phone?

It's https://en.wikipedia.org/w/index.php?title=Wikipedia:Village_pump_(technical)&oldid=1134542017#Ingleside,_Texas in a private session on mobile, but modified with the Safari browser inspector using developer mode to apply the patches we have merged over the last few days, and then the second one IMG_7395, also applies

.mw-body-content {
	 -webkit-text-size-adjust: none;
	 text-size-adjust: none;
}

This seems to have got tagged incorrectly.

Looks good, moving to QA in prod

Change 892053 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Set word break for the entire content area

Reason:

I don't think this is needed anymore, but please feel free to restore with new Phabricator ticket if it's still solving a problem.

https://gerrit.wikimedia.org/r/892053

Test wiki on Patch demo by TheDJ using patch(es) linked to this task was deleted:

https://patchdemo.wmflabs.org/wikis/42ba885d68/w/