=== 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
| -- | --
| {F34913036 width=500} | {F34913035 width=500}
===== 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:
{F34913081}
Note: I applied [[ https://stackoverflow.com/questions/36230944/prevent-flex-items-from-overflowing-a-container | 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