UX: Prevent topic progress bar from overlapping (PR #12780)

On small desktop screens the topic progress bar would overlap various elements, this makes some space for it when needed. I also finessed the right alignment a little bit.

Before: Screen Shot 2021-04-20 at 10 43 46 PM

After:

GitHub

@pmusaraj do you know what progressHeight was meant to do here by any chance? removing it improved the positioning as far as I can tell!

progressHeight was introduced three years ago in UX: ensure the topic progress indicator is never overlapping with post controls with a comment:

// on desktop, we want the topic-progress after the last post
// on mobile, we want it right before the end of the last post
const progressHeight = this.site.mobileView ? 0 : $("#topic-progress").outerHeight();

“after the last post” sound like an issue – the one you’re solving with this PR :sweat_smile:

Curious because 9px is very specific, does this match something somewhere else?

This looks great!

I last looked at this a while ago, and I remember vaguely thinking that moving some of the positioning logic to CSS would be good. So :+1:, and removing progressHeight makes sense to me.

it’s the 8px padding on #main-outlet + 1px to account for border

So the progress bar aligns with the right side of the border below it here:

Screen Shot 2021-04-21 at 10 46 20 PM

It is a bit of a magic number, so I added a note :sparkles:

This pull request has been mentioned on Discourse Meta. There might be relevant details there: