Redesign: timeline: make date separator stick to bottom of room header

[bwindels]

Making it stick to the top should be easy with position: sticky; top: -10px on the li that contains the date separator. Will need to find a way to make it not being clipped by the timeline and appear on the border of the room header.

[t3chguy]

Related #4780

[532910]

@t3chguy from #14023:

That leads to confusion as it makes it look like that is the first message of that date

Every time I see just time label without a date I thought it's today, and it confuses much more than a sticky header could do.

Example: https://codepen.io/brianhaferkamp/pen/xogEXr

Considering that it's not a static image but a dynamic interactive I see no reason to be confused.

[bwindels]

Making it stick to the top should be easy with position: sticky; top: -10px on the li that contains the date separator. Will need to find a way to make it not being clipped by the timeline and appear on the border of the room header.

This won't be as easy fwiw, looked further into this and this is not how position sticky works, it will only disappear if it's parent is completely out of view, so you can't make it work with a flat list like our timeline currently.

[t3chguy]

might be possible to workaround using display: contents to effectively flatten the relationships there to make sticky work

[bwindels]

might be possible to workaround using display: contents to effectively flatten the relationships there to make sticky work

Interesting, wasn't aware of that. Although I assumed we would have to add hierarchy (e.g. a container per day) to make sticky work, rather than remove hierarchy?

[bwindels]

I was reading https://lea.verou.me/2020/06/hybrid-positioning-with-css-variables-and-max/ the other day and wondered if a hybrid approach like that could be helpful here.

[t3chguy]

Shouldn't need to, if we get display contents on the li that harbours the date separator then Sticky should work on that separator

[bwindels]

Hmm, would be interesting to see how this could work. I just tried on a timeline prototype mockup with sticky dates I made earlier:

.date-separator has position: sticky in both cases.

With a container for messages per day:

With a container (with display:contents) just for the date header:

This show the same problem as when not using display: contents, e.g. that when you don't have a grouping container per day, the previous header does not disappear, so if you have transparency or variable size, you run into problems.

[bwindels]

Another article on how to do a hybrid js/css approach: https://developers.google.com/web/updates/2017/09/sticky-headers

[ShadowJonathan]

This has become more relevant with matrix-org/matrix-react-sdk#7317, as date headers would become a point of functionality.

Edit: new PR; matrix-org/matrix-react-sdk#7339