Timeline scroller height overlap due to two line text

I found a style bug that timeline scroller will overlap the start date in Chinese locale, maybe it’s a little longer than english and wrap to two line. The figures below are in two locale but in the same topic.


image

2 Likes

Thanks a bunch for reporting this. Would you mind giving us a bit more info on this? I tried reproducing using “translate page” on our try.discourse.org instance but couldn’t get a consistent repro of what you are seeing.

Some of the sections in this bug report topic might help with getting us a little more info so we can hopefully squash this bug.

It’s a little complicated to reproduce.

(in chinese locate)

  1. Prepare a long topic with many posts, for example 200 posts. And I don’t read it before, or read at very beginning position, e.g. first 10 posts.
  2. Enter the topic and scroll the scoller handle up. Then the scroller shows a button “Back”. Make sure the progress indicator is high enough, can inside the handle if scroller handle reaches top.
  3. Continue to scroll up, until the handle reach or very close to the start date.

And you will see the overlap.

1 Like

I made an update to Discourse a couple weeks ago that attempts to handle this better:

This forces the timeline to only show 2 lines of text and hide the rest. So when text may be very long and/or the space available for the timeline is limited (narrow screens) it might look something like this:

Screenshot 2023-01-31 at 12.57.44 PM

This hides some or all of the date information on the handle in some cases, but prevents layout issues with the back button and avoids overlap with the date at the top of the timeline.

The date information on the timeline is a little redundant with the dates on posts themselves, so this seemed like a worthwhile tradeoff to avoid these issues where the layout breaks.

2 Likes