Fixed scroll bar issue in channel list

raiden-network · Apr 29, 2020 · f7ccff0 · f7ccff0
1 parent 464b899
commit f7ccff0
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 3 deletions.
diff --git a/raiden-dapp/CHANGELOG.md b/raiden-dapp/CHANGELOG.md
@@ -13,12 +13,14 @@
 - [#1381] Summary screen display exact amounts on hover
 - [#1300] General screen shows Raiden account balance when using subkey.
 - [#1382] Better error handling when PFS can't find routes between nodes.
+- [#1427] Scroll bar issue in Channel List view.
 
 [#1395]: https://github.com/raiden-network/light-client/issues/1395
 [#1381]: https://github.com/raiden-network/light-client/issues/1381
 [#1300]: https://github.com/raiden-network/light-client/issues/1300
 [#1382]: https://github.com/raiden-network/light-client/issues/1382
 [#1365]: https://github.com/raiden-network/light-client/issues/1365
+[#1427]: https://github.com/raiden-network/light-client/issues/1427
 
 ## [0.6.0] - 2020-04-21
 

diff --git a/raiden-dapp/src/components/navigation/Channels.vue b/raiden-dapp/src/components/navigation/Channels.vue
@@ -166,7 +166,8 @@ export default class Channels extends Mixins(NavigationMixin) {
 .channels {
   width: 100%;
   height: 100%;
-  overflow: hidden;
+  overflow-y: scroll;
+  @extend .themed-scrollbar;
 
   &:first-child {
     padding-top: 50px;
@@ -185,8 +186,7 @@ export default class Channels extends Mixins(NavigationMixin) {
   &__wrapper {
     height: 100%;
     width: 100%;
-    overflow-y: auto;
-    @extend .themed-scrollbar;
+    overflow-y: visible;
   }
 
   &__header {

diff --git a/raiden-dapp/src/scss/scroll.scss b/raiden-dapp/src/scss/scroll.scss
@@ -16,4 +16,17 @@
 .themed-scrollbar {
   scrollbar-color: $secondary-color $card-background;
   scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    width: 12px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: $card-background;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: $secondary-color;    /* color of the scroll thumb */
+    border-radius: 20px;       /* roundness of the scroll thumb */
+    border: 3px solid $card-background;  /* creates padding around scroll thumb */
+  }
 }