Make tall code blocks scrollable

[rooneyg21]

closes #1123

[sindresorhus]

This looks good!

It's smart to cut off in the middle of a line, but what if it's cut off on an empty line? Then it's not clear that there's more content. I think we should make it more obvious then. How about a slight bottom inset shadow to indicate there's more content? @bfred-it Thoughts?

[fregante]

@sindresorhus it’s hard to do that just with CSS because there’s no way to say “show only when there’s overflow.” It’d need some css trick

[sindresorhus]

https://stackoverflow.com/questions/44793453/how-do-i-add-a-top-and-bottom-shadow-while-scrolling-but-only-when-needed
https://stackoverflow.com/questions/38542163/pure-css-scroll-shadows
https://stackoverflow.com/questions/27451202/css-shadow-for-before-and-after-on-a-scrollable-container

[fregante]

This should probably be merged with the Gist max-height just to have them both in the same place and have both of them with the "scroll shadow" that Sindre suggested.

[rooneyg21]

Haven't had a chance to check this out in a while. Adding a shadow would make it very clear that there is more content there if they scroll. Will look into it this weekend 👨‍💻

[rooneyg21]

Hey Guys, finally got a chance to work on this. Here is how it looks when there is an overflow and when there isn't. Let me know what you guys think about the size of the shadow

I have also changed the selector to the following in order to limit this to only comments.

.comment-body > .highlight > blockquote,
.comment-body > .highlight > pre {
}

[fregante]

Tests:

short
block
quote

short
code

long
long
long
long
long
long
long
long
long
long
long
long

nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
nested
long
long
long
long
long
long

nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code
nested code

long
long
long
long
long
long
long
long
long
long
long
quote

long
long
long
long
long
long
long
long
long
long
long
long
long
long
long
long
long
long
long
long
long
long
code

[fregante]

Screenshot

[fregante]

@sindresorhus the only problem with those solutions is that they are background-based, so any image/pre in the blockquote will cover the shadow. Good enough?

[sindresorhus]

@bfred-it Let's just use JS then, to make it appear.

[fregante]

Related: dear-github/dear-github#166

[fregante]

Closing this PR since the suggested solution is completely different

[fregante]

We're overthinking it. GitHub's own code embeds don't show any shadows. Same for StackOverflow (example)

We should drop the shadow and merge this

[sindresorhus]

Looks good, but needs to be mentioned in the readme. (Mostly so that the GitHub Papercuts team can more easily borrow the feature).

[lukehefson]

Looks good, but needs to be mentioned in the readme. (Mostly so that the GitHub Papercuts team can more easily borrow the feature).

lol so true

[fregante]

Looks good, but needs to be mentioned in the readme

@arungalva are you still available to make these final changes to merge your feature? :)

[kanitw]

Given this is done directly in source/content.css, how can I disable this?

[kanitw]

NVM, just found I can override the CSS.

[dwelle]

For people's reference → to disable this feature, add this to the extension's custom css:

.comment-body blockquote,
.comment-body pre {
  max-height: none !important;
  overflow-y: visible !important;
}

[chrisblossom]

@dwelle Is there an updated way to disable this? The custom css override is not working for me on firefox. Thanks!

[fregante]

@dwelle Is there an updated way to disable this? The custom css override is not working for me on firefox. Thanks!

It works if you add !important

I updated the example above