Fixed bug where two scrollbars showed up on diffs page

[trulyronak]

On firefox/chrome, whenever you went to the diffs page, you would see 2 scrollbars. This was because CaptureManagerPage rendered things inside its own container, making it so it had its own overflow — thus adding another scrollbar to be rendered.

I fixed this by conditionally hiding the outer scrollbar when you are on the diffs page. It doesn't appear to affect / hide anything, as all elements for the diffs page are rendered within the CaptureManagerPage.

[ghost]

This pull request has been automatically deployed to FeaturePeek. 👌
Your deployment will be kept up-to-date with this pull request's latest changes.

https://peek.run/5v3hdzp3

---

Please read our docs for more configuration details.

[acunniffe]

Nice I could use featurepeak to test and it worked!

[JaapRood]

Nice catch! However, I don't think the solution here is to detect and swap classes, but instead to change the CSS layout for the list of endpoints to not need it's own scroll container: it's the "main" bit of content on the page, so should be in the main scrolling context of the page.

This is notoriously tricky in CSS, but since Flexbox a lot more doable. I wouldn't blame you if you left that kind of thing for me to tackle, but if you're keen to give it a go, have a look at the Testing Dashboard page. It has the same essential layout (scrollable sidebar + main content). After an initial layout technique, I faced the same problem as you describe here, and changed how the flex box layout worked.

[JaapRood]

Bye bye Javascript, hello CSS-only fix. Great one! There's some tiny nit-picks left over, very gradual improvements, but nothing that should keep this from getting merged.

[JaapRood]

Is there any thing specific that made you hide overflow on the x-axis? Unless there's a specific reason for it, I tend to stay away form it, as it prevents a whole bunch of enhancements to be made. The most common enhancement I see, especially in navigation, is rendering tooltips over links, buttons, etc. Without hiding the overflow, these tooltips would be allowed to render outside the navigation, overlapping some of main page content (which for a tooltip is fine). When overflow is hidden, stuff gets a lot more complicated.

[trulyronak]

I had hidden it because it was adding an unnecessary scrollbar — switched it to visible so that if we need to scroll, it'll be able to scroll (https://www.loom.com/share/c0d79ac07dba4f7280bb63f10a0297f8)

[JaapRood]

Hmm, that's fair enough. It's an indicator of an underlying problem, as that left nav shouldn't overflow in the first place: it should be the set width that it is and all content should shrink to fit or wrap to new lines. I wonder if there's a missing flex-shrink: 0 would fix things, but chances are it's not just that. Don't bother too much with that though, unless you think it's fun.

[JaapRood]

Nice one Ronak, all good to go!