DEV: Small refactor of topic progress wrapper positioning (PR #10646)

This moves the logic for horizontally placing the topic progress wrapper from the JS component to SCSS. Doing so means it is more easily overridable by themes and plugins.

This also changes the left/right spacing from 1em to 2em for non-mobile screens (it fits better on iPad portrait especially).

GitHub

Just a note for anyone looking at this: it will display the progress wrapper at (screen_width - $reply-area-max-width) / 2 + 2em from the right edge of the screen. :wink: (the combination of flex, max-width, margin auto, left and right wasn’t immediately obvious to me, had to do some in-browser math :stuck_out_tongue:)

image

@pmusaraj There’s a small regression - #topic-progress-wrapper element prevents interacting with other elements at the bottom of the viewport. In the screenshot below it’s the area just above the composer (can’t click on the like button):