Fix bottom side gradient

Signed-off-by: Egor Savkin <es@m-labs.hk>

sass/css/_shop.scss

@@ -72,17 +72,15 @@ button {
             overflow-y: scroll;
             overflow-x: hidden;
             position: relative;
-            max-width: calc(3/10 * 100%);
-            min-width: calc(1/4 * 100%);
+            max-width: max(1/4 * 100%, 310px);
             /*padding-bottom: 4rem!important;*/
-        }
 
-        > aside.aside:after {
-            position: fixed;
+            .gradient-bottom {
+                position: sticky;
                 bottom: 0;
                 height: 100px;
-            max-width: calc(3/10 * 100%);
-            min-width: 0;
+                //width: max(1/4 * 100%, 310px);
+                width: inherit;
                 content: "";
                 background: linear-gradient(
                                 to top,
@@ -91,10 +89,11 @@ button {
                 );
                 pointer-events: none;
             }
+        }
 
         > section.main {
             flex: 4;
-            max-width: calc(3/4 * 100%);
+            width: calc(3/4 * 100%);
             overflow-y: scroll;
         }
     }

static/css/order-hardware.css

@@ -98,6 +98,10 @@
     min-width: max(300px, 30%);
   }
 
+  #root-shop .layout>aside.aside .gradient-bottom {
+    width: inherit;
+  }
+
   #root-shop .productItem {
     padding: 2rem 1rem 1rem;
   }
@@ -412,7 +416,7 @@
 
   #root-shop .layout>aside.aside.menu-opened + section.main:after {
     content: '';
-    position: absolute;
+    position: fixed;
     height: 100%;
     width: 100%;
     background-color: rgba(0, 0, 0, .3);
@@ -431,8 +435,8 @@
     height: 100%;
   }
 
-  #root-shop .layout>aside.aside:after {
-    width: 0;
+  #root-shop .layout>aside.aside .gradient-bottom {
+    display: none;
   }
 
   #root-shop .layout>aside.aside + section.main {
@@ -559,8 +563,8 @@
     height: 100%;
   }
 
-  #root-shop .layout>aside.aside:after {
-    width: 0;
+  #root-shop .layout>aside.aside .gradient-bottom {
+    display: none;
   }
 
   #root-shop .layout>aside.aside + section.main {

static/js/shop/Backlog.jsx

@@ -6,6 +6,7 @@ import {useRenderCount} from "@uidotdev/usehooks";
 import {BacklogGroups} from "./BacklogGroups";
 import {SearchBar} from "./SearchBar";
 import {BacklogSearchResult} from "./BacklogSearchResult";
+import {GradientBottom} from "./GradientBottom";
 
 /**
  * Component that renders the backlog in the aside
@@ -56,6 +57,8 @@ export function Backlog() {
                             {provided.placeholder}
                         </div>
                     )}
+
+                    <GradientBottom/>
                 </div>
             )}
 

static/js/shop/GradientBottom.jsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+export function GradientBottom() {
+    return (
+        <div className="gradient-bottom"></div>
+    )
+}