Fix scroll for nb-list inside nb-card

src/app/@theme/styles/_overrides.scss

@@ -9,6 +9,13 @@
     }
   }
 
+  nb-card nb-list {
+    @include nb-scrollbars(
+      nb-theme(card-scrollbar-color),
+      nb-theme(card-scrollbar-background-color),
+      nb-theme(card-scrollbar-width));
+  }
+
   .table {
     color: nb-theme(text-basic-color) !important;
   }

src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.html

@@ -1,6 +1,5 @@
-<nb-card-body>
-  <ngx-traffic-bar-chart [data]="trafficBarData.data"
+<ngx-traffic-bar-chart
+  [data]="trafficBarData.data"
   [labels]="trafficBarData.labels"
-                         [formatter]="trafficBarData.formatter">
-  </ngx-traffic-bar-chart>
-</nb-card-body>
+  [formatter]="trafficBarData.formatter"
+></ngx-traffic-bar-chart>

src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss

@@ -1,19 +1,7 @@
 @import '../../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  nb-card-body {
-    overflow: hidden;
-    position: relative;
-    display: flex;
-    flex-direction: column;
-  }
-
   ngx-traffic-bar-chart {
-    flex: 1;
     position: relative;
 
     ::ng-deep {

src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss

@@ -3,7 +3,11 @@
 @import '../../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  overflow: auto;
+  overflow: hidden;
+
+  nb-list {
+    height: 100%;
+  }
 
   .item {
     display: flex;

src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html

@@ -1,6 +1,4 @@
-<nb-card-header>
-  <span>Traffic</span>
-  <nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
+<span>Traffic</span>
+<nb-select matRipple [selected]="type" (selectedChange)="changePeriod($event)">
   <nb-option matRipple *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
-  </nb-select>
-</nb-card-header>
+</nb-select>

src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss

@@ -1,14 +1,5 @@
-@import '../../../../@theme/styles/themes';
-
-@include nb-install-component() {
-  nb-card-header {
+:host {
   display: flex;
   align-items: center;
   justify-content: space-between;
-    padding-top: nb-theme(card-header-with-select-padding-top);
-    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
-
-    @include nb-ltr(padding-right, 4rem);
-    @include nb-rtl(padding-left, 4rem);
-  }
 }

src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html

@@ -1,15 +1,23 @@
 <nb-reveal-card [showToggleButton]="false" [revealed]="revealed">
   <nb-card-front>
     <nb-card size="small">
-      <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
       <ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
       <nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-front>
   <nb-card-back>
     <nb-card size="small">
-      <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
+      <nb-card-header>
+        <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)">
+        </ngx-traffic-cards-header>
+      </nb-card-header>
+      <nb-card-body>
         <ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
+      </nb-card-body>
       <nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-back>

src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss

@@ -9,4 +9,11 @@
     @include nb-rtl(left, 1.25rem);
     cursor: pointer;
   }
+
+  nb-card-header {
+    padding-top: nb-theme(card-header-with-select-padding-top);
+    padding-bottom: nb-theme(card-header-with-select-padding-bottom);
+    @include nb-ltr(padding-right, 4rem);
+    @include nb-rtl(padding-left, 4rem);
+  }
 }

src/app/pages/layout/list/list.component.html

@@ -15,12 +15,14 @@
   <div class="col-md-12 col-lg-6 col-xxxl-6">
     <nb-card class="list-card" size="small">
       <nb-card-header>Users</nb-card-header>
+      <nb-card-body>
         <nb-list>
           <nb-list-item *ngFor="let user of users">
             <nb-user [name]="user.name" [title]="user.title">
             </nb-user>
           </nb-list-item>
         </nb-list>
+      </nb-card-body>
     </nb-card>
   </div>
 </div>