style: Replace pesudo-div with mask-image for better fading out

Author: pham

_sass/_tab-main.scss

@@ -71,30 +71,23 @@
   text-align: left;
   &.limit-height {
     max-height: var(--grid-body-height);
-    position: relative;
     overflow-y: auto;
     padding-bottom: 0;
     box-sizing: border-box;
-    &::after {
-      content: "";
-      position: sticky;
-      display: block;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: 30px;
-      opacity: 0;
-      padding: 0;
-      margin: 0;
-      background: linear-gradient(to top,
-        rgba(0, 0, 0, 0.12) 0%,
-        transparent 100%);
-      pointer-events: none;         /* clicks pass through */
-      transition: opacity 0.4s ease;
-      z-index: 1;
-    }
-    &.has-more::after {
-      opacity: 1;
+    &.has-more {
+      -webkit-mask-image: linear-gradient(
+        to bottom,
+        black 0%,
+        black calc(100% - 100px),   // solid/opaque until 100px from bottom
+        transparent 100%            // fade to fully transparent
+      );
+      mask-image: linear-gradient(
+        to bottom,
+        black 0%,
+        black calc(100% - 100px),
+        transparent 100%
+      );
+      transition: mask-image 0.4s ease;
     }
   }
   h2 {

_sass/init.scss

@@ -6,4 +6,4 @@
 // @forward 'default' with ( $color-fg: white );
 
 // Make grid boxes the same height (scrollable)
-// @forward 'default' with ( $grid-body-height: 200px );
+// @forward 'default' with ( $grid-body-height: 260px );