Date in timeline slider sometimes not showing in mobile layout

Hi, there seem to be some very random issues with Discourse not showing the date or just showing the month without the year in the timeline slider, especially in mobile mode:

Narrow desktop mode: 1) Firefox logged in, 2) Firefox anon, 3) Chromium logged in, 4) Chromium anon

Mobile mode: 1) Firefox logged in, 2) Firefox anon, 3) Chromium logged in, 4) Chromium anon

There has also been difficulty getting the date to show in the timeline even in normal width desktop mode. I found a CSS tweak that a dev uploaded here which when applied on my Discourse seems to make it always show the month/year in normal desktop width, and at least the month but sometimes not the year in mobile mode on Firefox for Android, and always the full month/year in mobile mode on Chrome for Android:

.timeline-container .topic-timeline .timeline-scrollarea {
    min-width: 5em;
}
.timeline-container .topic-timeline .timeline-replies,
.timeline-container .topic-timeline .timeline-ago {
    overflow: visible;
    max-width: unset;
}
.timeline-container .topic-timeline .timeline-scroller-content {
    overflow: visible;
    padding-left: 0.5em;
    max-height: 4em;
}
1 Like

I’ll take a look at this; sometimes the date will be hidden if there’s not enough space for it… though in this case on mobile I think it’s being a little too aggressive.

2 Likes

Thanks a lot @awesomerobot for looking into it!

Does it also sometimes try to show just the month without the year to save space, or is that a separate bit of logic or a bug? I suspected that it had something to do with space limitations, and I tried different zoom levels but it doesn’t seem to make any difference, and I’m not sure why there’s inconsistency between Firefox and Chromium. For example:


And then I’m not sure why there’s a difference in the amount of space needed to display Mar 2020 (only shows Mar and only in Firefox) vs. Apr 2020 (shows the year too only with Firefox):


The content is limited to 2 lines to avoid another issue with the “back” button positioning and overlapping with the dates at the top/bottom — so anything that would wrap to a third line is hidden.

I’ve made an update that should improve this, it’s live on Meta now. Let me know if you still encounter the issue.

5 Likes

Working great, thanks very much @awesomerobot !

1 Like