Moving this back to needs more work as I have pending questions on the patch

Change 721087 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Clean up for adding title to sticky header

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

Change 721087 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Clean up for adding title to sticky header

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

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Pull up an article locally or on Beta cluster in modern Vector as a logged in user.
AC1: Scroll down to trigger sticky header and note that the article title is in the sticky header.

There are two different mocks in the description. The first one uses a shadow, the second one not. I'm not a big fan of shadows, but if the background color of both the header and the page are exactly the same, then the shadow helps readers understanding that this is sticky and will be there. Which of the images is correct?

Change 731830 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Fix article title in sticky header template.

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

Test wiki created on Patch Demo by CMing (WMF) using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/e7ea82b0b2/w/

Note also the ' at https://eu.wikipedia.org/wiki/Storia_d'amore?vectorstickyheader=1

Change 731830 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix article title in sticky header template.

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

hi @Edtadros - thanks for your thorough testing - I was able to replicate the cutting off in beta but not on my patchdemo link:

I'm not sure what changes happened recently that would have introduced that regression - I'll take a look

Change 734445 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Fix title getting cut off in sticky header.

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

Change 734445 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix title getting cut off in sticky header.

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

I'm trying to make a new article at the beta cluster but it seems that's impossible. Have you tried something like "Storia d'amore", to see if the ' is working as '?

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC3: To test for example italicized titles, navigate to https://en.wikipedia.beta.wmflabs.org/wiki/Italic_title, login, and verify that the italicized page title is reflected in the sticky header and is not cut off.

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

✅ AC3: To test for example italicized titles, navigate to https://en.wikipedia.org/wiki/Where_the_Red_Fern_Grows?vectorstickyheader=1, login, and verify that the italicized page title is reflected in the sticky header and is not cut off.

Two considerations:

• It is not obvious why the title has to be faded out at exactly that width; it leaves quite a lot of whitespace in the header on my screen, too much for my taste. I would have suggested to only fade titles out whenever they get too close to the icons. But I guess that could be looked at again when the header gets its final form.
• The title behaves unexpectedly in this dewiki article. I imagine it has to do with the <wbr> tags. Should I file this bug as a new task or does it still fall within the scope of this one?

In T289814#7646254, @XanonymusX wrote:

Two considerations:

• It is not obvious why the title has to be faded out at exactly that width; it leaves quite a lot of whitespace in the header on my screen, too much for my taste. I would have suggested to only fade titles out whenever they get too close to the icons. But I guess that could be looked at again when the header gets its final form.
• The title behaves unexpectedly in this dewiki article. I imagine it has to do with the <wbr> tags. Should I file this bug as a new task or does it still fall within the scope of this one?

@XanonymusX - thank you for raising these! The first issue, with the faded out title, will be taken care of in this task: T298885: [Sticky header] Consider removing (or increasing) max-width on page title.

@XanonymusX thanks for your feedback.

In T289814#7646254, @XanonymusX wrote:

Two considerations:

• It is not obvious why the title has to be faded out at exactly that width; it leaves quite a lot of whitespace in the header on my screen, too much for my taste. I would have suggested to only fade titles out whenever they get too close to the icons. But I guess that could be looked at again when the header gets its final form.

this is being reconsidered here: T298885

• The title behaves unexpectedly in this dewiki article. I imagine it has to do with the <wbr> tags. Should I file this bug as a new task or does it still fall within the scope of this one?

Interesting, I have not seen that before. My initial response is that we should use CSS to achieve this wrapping rather than <wbr> tags. In the screenshot below I removed the <wbr> tags and added word-break: break-all, which as far as I can tell has the same result. Here is how it looks:

Well, the use of the <wbr> tags is part of the dewiki guide on how to use DISPLAYTITLE. There have been discussions about it in the past, but apparently this has shown to be the most efficient solution so far. Even more extreme example: Lopadotemachoselachogaleokranioleipsanodrimhypotrimmatosilphiokarabomelitokatakechymenokichlepikossyphophattoperisteralektryonoptokephalliokinklopeleiolagoosiraiobaphetraganopterygon. What you are proposing is what the mobile version is doing, right? Of course that could be used for all skins, so manual solutions wouldn't be needed anymore. Or, if we were to go for a new technical solution, imo soft hyphens would need to be allowed in DISPLAYTITLE, just breaking the title at random positions should generally be avoided (see T66528).

Anyway, for now I would suggest that the sticky header just ignore <wbr> tags!

This last example goes out of the box at Basque Wikipedia: https://eu.wikipedia.org/wiki/Lopadotemakhoselakhogaleokranioleipsanodrimypotrimmatosilphiokarabomelitokatakekhymenokikhlepikossyphophattoperisteralektryonoptekephalliokinklopeleiolag%C5%8Diosiraiobaph%C4%93traganopteryg%E1%B9%93n

In T289814#7648842, @Theklan wrote:

This last example goes out of the box at Basque Wikipedia: https://eu.wikipedia.org/wiki/Lopadotemakhoselakhogaleokranioleipsanodrimypotrimmatosilphiokarabomelitokatakekhymenokikhlepikossyphophattoperisteralektryonoptekephalliokinklopeleiolag%C5%8Diosiraiobaph%C4%93traganopteryg%E1%B9%93n

@Theklan thanks for providing another example. Interestingly the English version of this page uses a soft-hyphen (scroll down to instead of <wbr>, with the downside of these unidentified characters appearing:

On the Basque version of the page the word-break: break-all solution seems to work again:

Anyway, for now I would suggest that the sticky header just ignore <wbr> tags!

@XanonymusX I agree. Due to the design constraints of the sticky header, page titles should be limited to one line (either by fade or ellipses) to avoid situations like below:

@Theklan for the issue of the title going outside of the content box when the word is too long:

I propose we do what we do on mobile:

word-break:break-all;	word-break: break-word;

Opened T300134: Restrict sticky header to one line only regardless of length to track the fix for this

Whenever you restrict width, you really should just always use word-break: break-word; honestly (and nowrap is the devil)

In T289814#7649685, @alexhollender wrote:

@Theklan thanks for providing another example. Interestingly the English version of this page uses a soft-hyphen (scroll down to instead of <wbr>, with the downside of these unidentified characters appearing:

That seems like a font/glyph selection issue, where the browser/OS is not doing proper glyph fallback. I just see a hyphen as I should. Maybe your browser/OS is using a font that claims to provide this character, but doesn't actually. Lots of broken fonts out there.

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

https://patchdemo.wmflabs.org/wikis/e7ea82b0b2/w/