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?

@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

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

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.

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 👨‍💻

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 {
}

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

Screenshot

@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?

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

Related: dear-github/dear-github#166

Closing this PR since the suggested solution is completely different

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

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

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

Looks good, but needs to be mentioned in the readme

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

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

NVM, just found I can override the CSS.

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;
}

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

@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