Problem with `topic-progress-wrapper` in RTL

Contribute Bug

AI-generated summary

A problem with the topic-progress-wrapper in RTL (right-to-left) layouts has been reported. nildarar finds that the page becomes cluttered when scrolling to the end of a topic page. Commenting out certain CSS lines solves the issue.

nildarar explains that the problem occurs when switching from mobile to desktop view at a screen width of 925px or more. Osama believes the root problem is that Discourse should render in desktop view when the screen is 925px wide or more. He also notes that removing position: sticky would break the topic timeline. Additionally, Osama mentions that the topic progress bar should be on the left in RTL layouts and has submitted a pull request to fix this.

Nildarar thanks Osama for the fix and will investigate which devices are affected. Sam has merged the pull request, hoping it will fix the issue.

1

Hi dear discourse,
In RTL, when we go to the end of the topic page, topic-progress-wrapper class makes the page cluttered. Please check this item.

When we comment on the following values, the problem is solved:

@media screen and (min-width: 925px)
.container.posts .topic-navigation {
    grid-area: timeline;
    align-self: start;
    /* position: -webkit-sticky;
       position: sticky; */
    top: 6em;
    margin-right: 1em;
    z-index: 100;
}
2

Hi @Nildarar

Can you please post a screenshot of the problem?

3

Not shown in the screenshot. Let me explain further. To see the problem, please do the following:

  1. make your template RTL
  2. Enter the mobile view
  3. Increase the screen width to more than 925px
  4. Scroll to the end of the topic
  5. The Topic Progress module disappears from the screen and the page scrolls horizontally.

We could have fixed this problem ourselves by changing the CSS, but I thought there might be a bug beyond that and it would be found by your review.

1 Like
4

Ok, so this is a symptom of a bigger problem. The root problem here is that Discourse should render in desktop view rather than mobile view when the screen is ≥ 925px wide. Can you tell me on what device(s) do you see this problem?

It’s worth mentioning that removing position: sticky may seem to solve this particular problem, but it will break the topic timeline (it will not go down as you scroll down a topic).

Kind of unrelated to this, but I noticed the topic progress bar should be on the left rather than the right when in RTL layout. I sent a PR for this here: FIX: Topic progress bar should be on the left in RTL layouts by OsamaSayegh · Pull Request #11999 · discourse/discourse · GitHub.

7 Likes
5

Users reported this to us and I saw it in Dev Tools. I will ask my colleagues and let you know.

Thank you for this fix :+1:

2 Likes
6

Merged, thanks heaps for reporting, I hope it fixes the issue.

3 Likes