Date in timeline slider sometimes not showing in mobile layout

AI-generated summary

rahim123 reported an inconsistent display of dates in Discourse’s timeline slider on mobile and narrow desktop views, where sometimes only the month appears or the date is hidden entirely. Screenshots showed variations across browsers (Firefox vs. Chromium) and login states. awesomerobot confirmed the issue stems from space constraints, noting the timeline limits content to two lines to avoid overlapping with the back button. rahim123 asked whether the month-only display was intentional or a bug, noting odd inconsistencies — for example, “Mar 2020” truncating to “Mar” in Firefox while “Apr 2020” displayed fully. awesomerobot clarified the truncation is due to line limits, not separate logic. A fix was deployed via PR #20943 and is live on Meta. rahim123 confirmed the fix works well and thanked awesomerobot for the resolution.

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.

https://github.com/discourse/discourse/pull/20943

6 Likes

Working great, thanks very much @awesomerobot !

1 Like