Merge pull request #2544 from matrix-org/matthew/gradients

make overflow gradients much smaller and turn bottom into drop shadow

res/css/structures/_RoomSubList.scss

@@ -134,29 +134,38 @@ limitations under the License.
         position: sticky;
         left: 0;
         right: 0;
-        height: 35px;
+        height: 8px;
         content: "";
         display: block;
         z-index: 100;
         pointer-events: none;
     }
 
     &.mx_IndicatorScrollbar_topOverflow > .mx_AutoHideScrollbar_offset {
-        margin-top: -35px;
+        margin-top: -8px;
     }
     &.mx_IndicatorScrollbar_bottomOverflow > .mx_AutoHideScrollbar_offset {
-        margin-bottom: -35px;
+        margin-bottom: -8px;
     }
 
     &.mx_IndicatorScrollbar_topOverflow::before {
         top: 0;
+        transition: background-image 0.1s ease-in;
         background: linear-gradient(to top, rgba(242,245,248,0), rgba(242,245,248,1));
     }
 
+/*
+    // for now, we remove the bottomOverflow entirely as we don't want to
+    // lose the screen real-estate due to a bg-colored gradient, but we also
+    // don't want to use drop shadows and risk a confusing hierarchy of cards.
+    // so, instead, we hard-clip at the bottom but soft-clip at the top.
     &.mx_IndicatorScrollbar_bottomOverflow::after {
         bottom: 0;
-        background: linear-gradient(to bottom, rgba(242,245,248,0), rgba(242,245,248,1));
+        transition: background-image 0.1s ease-in;
+        margin: 0px -8px;
+        background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.0));
     }
+*/
 }
 
 .collapsed {