Avoid fade-out above horizontal scrollbars

The changes in the patch check if a horizontal scrollbar is present
and move the absolute positioned fade overlay above that scrollbar.

Since we cannot change the CSS of the :after element via JS a new div
element was introduced.

Bug: T220200
Change-Id: Ia69c9be0facaf3ecebdb9f76d36f7cb3412c0816

package.json

@@ -53,7 +53,7 @@
   "bundlesize": [
     {
       "path": "resources/dist/index.js",
-      "maxSize": "13.4KB"
+      "maxSize": "13.5KB"
     }
   ]
 }

src/ui/templates/referencePreview/referencePreview.js

@@ -37,6 +37,7 @@ export function renderReferencePreview(
 			</strong>
 			<div class='mwe-popups-extract'>
 				<div class='mw-parser-output'>${ model.extract }</div>
+				<div class='mwe-popups-fade' />
 			</div>
 			<footer>
 				<a href='${ url }' class='mwe-popups-read-link'>${ linkMsg }</a>
@@ -66,8 +67,23 @@ export function renderReferencePreview(
 			return;
 		}
 
+		const $extract = $( element ).parent();
+
+		if ( typeof element.hasHorizontalScroll === 'undefined' ) {
+			element.hasHorizontalScroll = element.scrollWidth !==
+				element.scrollLeft + element.clientWidth;
+
+			if ( element.hasHorizontalScroll ) {
+				// set bottom offset to scrollbar size
+				$extract.find( '.mwe-popups-fade' ).css(
+					'bottom',
+					`${ element.offsetHeight - element.clientHeight }px`
+				);
+			}
+		}
+
 		element.isScrolling = !scrolledToBottom;
-		$( element ).parent().toggleClass( 'mwe-popups-fade-out', element.isScrolling );
+		$extract.toggleClass( 'mwe-popups-fade-out', element.isScrolling );
 	} );
 
 	return $el;

src/ui/templates/referencePreview/referencePreview.less

@@ -30,19 +30,24 @@
 		min-height: @lineHeight;
 
 		&:after {
+			width: 0;
+		}
+
+		.mwe-popups-fade {
+			position: absolute;
 			width: 100%;
-			bottom: -@lineHeight;
+			height: @lineHeight;
 			background-color: transparent;
 			background-image: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
 			background-image: -moz-linear-gradient( top, rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
 			background-image: linear-gradient( rgba( 255, 255, 255, 0 ), rgba( 255, 255, 255, 1 ) );
-			.transition( bottom 250ms ease );
+			opacity: 0;
+			pointer-events: none; // Allows clicking "through" the element
+			.transition( opacity 250ms ease );
 		}
 
-		&.mwe-popups-fade-out {
-			&:after {
-				bottom: 0;
-			}
+		&.mwe-popups-fade-out .mwe-popups-fade {
+			opacity: 1;
 		}
 
 		.mw-parser-output {