Description
Sometimes a page title is clipped but there is still available space. In this case the clipped page title looks a little weird:
| example 1 | example 2 |
|---|---|
 |  |
Possible solution 1
Maybe we could do something like flex-grow:1 (or a similar pattern) such that the page title takes up the remaining available space (maybe minus some margin/padding so it's not bumping up against other elements)? I think it would get tricky to figure out when/how to show the fade out in this case, but maybe there's some way to do it. Ignoring the fade-out being dynamic, here's how it would look for a super long title:
Note: I applied this min-width: 0 trick to both the .vector-sticky-header-context-bar element and the .vector-sticky-header-start element to get this to work.
Possible solution 2
We could increase the max-width on the page title element
QA steps
- Navigate to an article page with a really long title as a logged-in user -- patchdemo link: https://patchdemo.wmflabs.org/wikis/d990d92b37/wiki/Cneoridium_dumosum_(Nuttall)_Hooker_F._Collected_March_26,_1960,_at_an_Elevation_of_about_1450_Meters_on_Cerro_Quemaz%C3%B3n,_15_Miles_South_of_Bah%C3%ADa_de_Los_Angeles,_Baja_California,_M%C3%A9xico,_Apparently_for_a_Southeastward_Range_Extension_of_Some_140_Miles
- Scroll down to see sticky header - note that the title fills the container with a bit of padding before the icons
