Expandable: Fade out section when 'closed'

## Issue
The abrupt cut-off of the expandable section bugs me (looks like a rendering glitch), especially when it cuts off in the middle of a line.

## Change
In addition to the existing 'More' button, we fade out the section to provide additional visual cues.

## Approach
This solution doesn't require the background color to be known, so it will work regardless where <Expandable> is used, or whatever color-scheme is chosen.

However, it does utilize non-standard css -- for older browsers, it should simply cut-off like the before.

CHANGELOG.md

@@ -12,6 +12,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ### Changed
 
+- Fade out expandable areas (e.g. comments, file description) when collapsed  _community pr!_ ([#4818](https://github.com/lbryio/lbry-desktop/pull/4818))
+
 ### Fixed
 
 ## [0.48.0] - [2020-09-23]

ui/component/fileDescription/view.jsx

@@ -41,7 +41,11 @@ function FileDescription(props: Props) {
     <div>
       <div
         ref={descriptionRef}
-        className={classnames({ 'media__info-text--contracted': !expanded, 'media__info-text--expanded': expanded })}
+        className={classnames({
+          'media__info-text--contracted': !expanded,
+          'media__info-text--expanded': expanded,
+          'media__info-text--fade': hasOverflow && !expanded,
+        })}
       >
         <MarkdownPreview className="markdown-preview--description" content={description} />
         <ClaimTags uri={uri} type="large" />

ui/scss/component/_expandable.scss

@@ -7,6 +7,7 @@
   max-height: 10rem;
   overflow: hidden;
   position: relative;
+  -webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
 }
 
 .expandable--open {

ui/scss/component/_media.scss

@@ -115,6 +115,10 @@
   max-width: 50rem;
 }
 
+.media__info-text--fade {
+  -webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
+}
+
 .media__info-expand {
   margin-top: var(--spacing-s);
 }