Fix scrollbars

src/app/dashboard/dashboard.component.scss

@@ -3,6 +3,7 @@
 
 @import "../../assets/scss/variables.scss";
 @import "../../assets/scss/mixins/layout.scss";
+@import "../../assets/scss/mixins/scrollbar";
 
 @mixin set-tfw-web($layouts-key) {
   .tfw-web {
@@ -71,6 +72,8 @@
     background-color: $tao-gray-50;
   }
 
+  @include set-scrollbar-style('dark', '.tfw-messages');
+
   .tfw-messages {
     padding: $space;
     padding-top: $hair;

src/app/terminal/terminal.component.scss

@@ -5,6 +5,10 @@
 @import "../../app/dashboard/dashboard.component.scss";
 
 
+::ng-deep .xterm .xterm-viewport {
+  overflow-y: auto;
+}
+
 .tfw-xterm {
   max-height: 100%;
   height: 100%;

src/assets/scss/mixins/_scrollbar.scss

@@ -1,17 +1,36 @@
-@mixin set-scrollbar-style() {
-  ::-webkit-scrollbar-track
-  {
-    background-color: #F5F5F5;
+@mixin set-scrollbar-style($style, $selctor) {
+  ::-webkit-scrollbar {
+    width: 3px !important;
   }
 
-  ::-webkit-scrollbar
-  {
-    width: 4px;
-    background-color: #F5F5F5;
+  #{$selctor}::-webkit-scrollbar-track {
+    border-radius: 10px !important;
+    width: 3px !important;
+    @if ($style == 'light') {
+      background: #8a8a8a !important;
+
+    } @else if ($style == 'dark') {
+      background: white !important;
+    };
   }
 
-  ::-webkit-scrollbar-thumb
-  {
-    background-color: gray;
+  #{$selctor}::-webkit-scrollbar-thumb {
+    @if ($style == 'dark') {
+      background: #8a8a8a !important;
+
+    } @else if ($style == 'light') {
+      background: white !important;
+    };
+    border-radius: 10px !important;
+  }
+
+  #{$selctor}::-webkit-scrollbar-thumb:hover {
+    @if ($style == 'dark') {
+      background: #424242 !important;
+
+    } @else if ($style == 'light') {
+      background: #9d9d9d !important;
+    };
+    cursor: pointer !important;
   }
 }

src/styles.scss

@@ -8,4 +8,5 @@ body, html {
   height: 100vh;
   width: 100vw;
   overflow: hidden;
+  @include set-scrollbar-style('light', '');
 }