7

I had the review page open to fill half my monitor (how I normally browse the Q&A). I wanted to vote to reopen, but I couldn't see the reopen action even when I scrolled over.

bad gif of the workflow

Unfortunately, it looks my gif didn't quite record correctly, but if you look closely you'll see that even when scrolled all the way to the right, only the "Leave Closed" and "Edit and Reopen" buttons are visible.

This was on Code Review. I'm on Chrome Version 64.0.3282.186 (Official Build) (64-bit).

My resolution is 1920 x 1080, and the window took up one half of the screen originally (I shrank it more for the gif, but the behavior was the same).

  • Like @MrWhite, I can't reproduce this either. Can you check if it still happens after turning off all user scripts / styles and browser extensions? – Ilmari Karonen Mar 17 '18 at 15:53
  • 2
    ...wait, I can reproduce it, but only if I scroll down enough to make the review top pane transition to sticky mode. In your screen recording, it looks like your vertical scroll position is just on the borderline of where this starts to happen. If you'd scrolled a dozen or so pixels upwards, the panel would've probably become unstuck again. – Ilmari Karonen Mar 17 '18 at 15:57
  • Ah, yes, I see the same as @IlmariKaronen on StackOverflow. Making the review bar more responsive and not a fixed width:1060px would seem to workaround the issue in this instance (or scroll up a bit so the review bar becomes unfixed, as mentioned.) – MrWhite Mar 17 '18 at 16:17
  • 1
    @MrWhite: That would be good, yes. There would be plenty of room for the buttons to wrap onto two lines if the width wasn't fixed. As an alternative / complementary solution, replacing the JS sticky positioning code with CSS position: sticky, or fixing the JS code so that it lets the bar scroll horizontally with the page, would also help. – Ilmari Karonen Mar 17 '18 at 16:25
1

Here's a fairly simple way for an SE dev to fix this: in review.js, in the function dockReviewBar(), replace the line:

$bar.css({ position: 'fixed', top: StackExchange.scrollPadding.getPaddingTopMinimal(), bottom: '', width: $header.width(), marginTop: spacingTop });

with:

$bar.css({ position: 'fixed', left: $header.offset().left - $window.scrollLeft(), top: StackExchange.scrollPadding.getPaddingTopMinimal(), bottom: '', width: $header.width(), marginTop: spacingTop });

That's the same as the current code, but with the extra property left: $header.offset().left - $window.scrollLeft() added. This should make the review bar scroll horizontally with the page even when stuck to the top of the screen.

Oh, and while you're at it, please do the same thing for the top bar, too.

(And yes, this is going into the next version of SOUP.)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .