Problem with `topic-progress-wrapper` in RTL

Bug
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: https://github.com/discourse/discourse/pull/11999.

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