Fix fade out on RBF history

frontend/src/app/components/rbf-timeline/rbf-timeline.component.html

@@ -1,6 +1,6 @@
 <div class="rbf-timeline box" [class.mined]="replacements.mined">
   <div class="timeline-wrapper">
-    <div class="timeline" *ngFor="let timeline of rows; let j = index" [class.fade-out]="!timelineExpanded && j === rowLimit - 1">
+    <div class="timeline" *ngFor="let timeline of rows; let j = index">
       <div class="intervals" *ngIf="j < rowLimit || timelineExpanded">
         <ng-container *ngFor="let cell of timeline; let i = index;">
           <div class="node-spacer"></div>
@@ -50,6 +50,8 @@
         </ng-container>
       </div>
     </div>
+  </div>
+  <div [class.fade-out]="!timelineExpanded && rows.length > rowLimit"></div>
   <div class="toggle-wrapper" *ngIf="rows.length > rowLimit && rowLimit !== 0">
     <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(true);" *ngIf="!timelineExpanded; else collapseBtn">
       <span i18n="show-all">Show all</span>
@@ -59,7 +61,6 @@
       <button class="btn btn-sm btn-primary graph-toggle" (click)="toggleTimeline(false);"><span i18n="show-less">Show less</span></button>
     </ng-template>
   </div>
-  </div>
 
   <ng-template #nodeSpacer>
     <div class="node-spacer"></div>

frontend/src/app/components/rbf-timeline/rbf-timeline.component.scss

@@ -31,6 +31,11 @@
     -ms-overflow-style: none;
     scrollbar-width: none;
   
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
   .fade-out {
     position: relative;
 
@@ -38,22 +43,18 @@
       content: '';
       position: absolute;
       width: 100%;
-        height: 100%;
+      height: 70px;
+      top: -70px;
       background: linear-gradient(to bottom, rgba(36, 39, 62, 0) 0%, rgba(36, 39, 62, 1) 100%);
       z-index: 1;
     }
   }
 
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
   .toggle-wrapper {
     width: 100%;
     text-align: center;
     margin: 1.25em 0 0;
   }
-  }
 
   .intervals, .nodes {
     min-width: 100%;