[UI] Fix scrollbar overlapse bug

[maestromac]

What type of PR is this? (check all applicable)

• Bug Fix

Description

Removed two CSS line to fix a UI bug. Will need another pair of eyes to verify I didn't break anything somewhere else though.

Related Tickets & Documents

Resolves #1332

Mobile & Desktop Screenshots/Recordings (if there are UI changes)

before

After

Added to documentation?

• no documentation needed

[optional] What gif best describes this PR or how it makes you feel?

[Link2Twenty]

This fixes the problem.
I believe the reason this was done was so the anchor point would start you below the nav bar.
If this change were to be applied you would start with the anchor point at top 0 which is behind the nav.

Here is an example with and without the padding/margin hack (and anchor links just to make it easier to show)

With:

Without:

[Link2Twenty]

While we're here, how do we feel about adding a link icon after headers?

Maybe something like this?

http://jsfiddle.net/link2twenty/4Lxo2e7a/

[Zhao-Andy]

As @Link2Twenty mentioned, the padding-top and margin-top were to allow the headers to jump properly and account for the navbar. We might be able to solve this with z-index and allowing the code block to be on top of the header element.

[maestromac]

I knew I broke something.

[Zhao-Andy]

Also @Link2Twenty I think it makes sense for this PR to only fix the bug. Like the use of an emoji for the icon though.

Would you like to open a feature request issue for the icon? I think it makes sense, too; there are some implementation details we'll want to discuss that probably should be left in a separate issue.

[benhalpern]

@maestromac @Zhao-Andy @Link2Twenty I think this can be fixed most simply by making the z-index of the code area higher than the z-index of the header, eh?

With the link thing: I think the left margin is still my favorite place for it. And possibly only on hover?

We'd previously had an implementation of this idea which shipped the image in the actual HTML which didn't seem right. I think ideally this would maybe be something included in the CSS ::before or something along those lines. Does that make sense?

[maestromac]

@benhalpern I've toyed around with adjusting z-index in this commit but it doesn't seem to work. Maybe I did it wrong? This error is reproducible on Firefox 64 on MacOS (just make sure your scrollbar are always displayed

[Link2Twenty]

&.anchor{
  position: relative;
  top: -50px;
  display: block;
  visibility: hidden;
}

Having just done a couple of tests, admittedly in chrome, this should be enough.

[Link2Twenty]

@Zhao-Andy @benhalpern I'll raise a feature request in the morning, for the anchor links, but it sounds like Ben is hoping for something like this.

http://jsfiddle.net/link2twenty/2z7rqu1k/

[Zhao-Andy]

Just tested with Mac, it works across macOS Chrome, Firefox, Safari and Windows 10 Chrome, Firefox, and IE. Since it's an old PR I think we should favor merging it over small changes.