fix(#1472): hide scrollbar in scrollable components (#1490)

This PR hides the scrollbar in all browsers without affecting the behavior Closes #1472
argilla-io · May 18, 2022 · 999897a · 999897a
1 parent 20ee14a
commit 999897a
Show file tree

Hide file tree

Showing 18 changed files with 25 additions and 29 deletions.
diff --git a/frontend/assets/scss/abstract/placeholders/_placeholders.scss b/frontend/assets/scss/abstract/placeholders/_placeholders.scss
@@ -220,4 +220,13 @@
       transition: opacity 0.1s ease 0.2s;
     }
   }
+}
+%hide-scrollbar {
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
 }
diff --git a/frontend/assets/scss/base/base.scss b/frontend/assets/scss/base/base.scss
@@ -246,32 +246,6 @@ a {
     height: 100%
 }
 
-.resize-observer[data-v-b329ee4c] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1;
-    width: 100%;
-    height: 100%;
-    border: none;
-    background-color: transparent;
-    pointer-events: none;
-    display: block;
-    overflow: hidden;
-    opacity: 0
-}
-
-.resize-observer[data-v-b329ee4c] object {
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    overflow: hidden;
-    pointer-events: none;
-    z-index: -1
-}
 .highlight-text {
   display: inline;
   color: $highlight;

diff --git a/frontend/components/commons/header/filters/FilterDropdown.vue b/frontend/components/commons/header/filters/FilterDropdown.vue
@@ -144,6 +144,7 @@ export default {
       overflow-y: auto;
       margin: 0 -1em 0 -1em;
       padding: 0 1em 1em 1em;
+      @extend %hide-scrollbar;
     }
     li {
       padding: 0.4em 0;

diff --git a/frontend/components/commons/header/filters/FiltersList.vue b/frontend/components/commons/header/filters/FiltersList.vue
@@ -313,6 +313,7 @@ $number-size: 18px;
         // width: 910px;
         max-height: 80vh;
         overflow: auto;
+        @extend %hide-scrollbar;
       }
     }
     &__item {

diff --git a/frontend/components/commons/results/Metadata.vue b/frontend/components/commons/results/Metadata.vue
@@ -151,6 +151,7 @@ export default {
     overflow-y: auto;
     margin-right: -1em;
     padding-right: 1em;
+    @extend %hide-scrollbar;
   }
   &__blocks {
     display: flex;

diff --git a/frontend/components/commons/results/ResultsList.vue b/frontend/components/commons/results/ResultsList.vue
@@ -179,9 +179,7 @@ export default {
     padding-left: 4em;
     padding-bottom: 260px;
     transition: padding 0s ease-in-out 0.1s;
-    &::-webkit-scrollbar {
-      display: none;
-    }
+    @extend %hide-scrollbar;
   }
   &__li {
     position: relative;

diff --git a/frontend/components/commons/sidebar/SidebarProgress.vue b/frontend/components/commons/sidebar/SidebarProgress.vue
@@ -131,6 +131,7 @@ label {
   padding-right: 1em;
   margin-right: -1em;
   overflow: auto;
+  @extend %hide-scrollbar;
 }
 .records-number {
   margin-right: 0;

diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/core/table/ReTableInfo.vue
@@ -490,6 +490,7 @@ export default {
     overflow: auto;
     height: calc(100vh - 203px);
     padding-bottom: 0.5em;
+    @extend %hide-scrollbar;
   }
   &__item {
     position: relative;

diff --git a/frontend/components/core/table/TableFiltrableColumn.vue b/frontend/components/core/table/TableFiltrableColumn.vue
@@ -177,6 +177,7 @@ export default {
     overflow-y: auto;
     margin: 0 -1em;
     padding: 0 1em 1em;
+    @extend %hide-scrollbar;
   }
   li {
     padding: 0.4em 0;

diff --git a/frontend/components/text-classifier/labeling-rules/RulesManagement.vue b/frontend/components/text-classifier/labeling-rules/RulesManagement.vue
@@ -238,6 +238,7 @@ export default {
   margin-bottom: 2em;
   overflow: auto;
   height: 100vh;
+  @extend %hide-scrollbar;
   &__container {
     padding: 20px 20px 50px 20px;
     background: rgba($lighter-color, 0.4);

diff --git a/frontend/components/text-classifier/results/RecordTextClassification.vue b/frontend/components/text-classifier/results/RecordTextClassification.vue
@@ -166,6 +166,7 @@ export default {
     overflow: auto;
     text-align: right;
     padding: 4em 1.4em 1em 1em;
+    @extend %hide-scrollbar;
   }
 }
 

diff --git a/frontend/components/text-classifier/sidebar/TextClassificationRules.vue b/frontend/components/text-classifier/sidebar/TextClassificationRules.vue
@@ -202,6 +202,7 @@ label {
   padding-right: 1em;
   margin-right: -1em;
   overflow: auto;
+  @extend %hide-scrollbar;
 }
 .records-number {
   margin-right: 0;

diff --git a/frontend/components/text-classifier/sidebar/TextClassificationStats.vue b/frontend/components/text-classifier/sidebar/TextClassificationStats.vue
@@ -101,6 +101,7 @@ label {
   padding-right: 1em;
   margin-right: -1em;
   overflow: auto;
+  @extend %hide-scrollbar;
 }
 .records-number {
   margin-right: 0;

diff --git a/frontend/components/text2text/sidebar/Text2TextStats.vue b/frontend/components/text2text/sidebar/Text2TextStats.vue
@@ -101,6 +101,7 @@ label {
   padding-right: 1em;
   margin-right: -1em;
   overflow: auto;
+  @extend %hide-scrollbar;
 }
 .records-number {
   margin-right: 0;

diff --git a/frontend/components/token-classifier/results/EntitiesHeader.vue b/frontend/components/token-classifier/results/EntitiesHeader.vue
@@ -132,6 +132,7 @@ export default {
     min-height: 48px;
     max-height: 189px;
     overflow: auto;
+    @extend %hide-scrollbar;
     &__button {
       margin-top: 0.3em;
       margin-left: 0.3em;

diff --git a/frontend/components/token-classifier/results/EntitiesSelector.vue b/frontend/components/token-classifier/results/EntitiesSelector.vue
@@ -182,6 +182,7 @@ export default {
       margin: 0;
       overscroll-behavior: contain;
       position: relative;
+      @extend %hide-scrollbar;
     }
     &__option {
       display: flex;

diff --git a/frontend/components/token-classifier/results/TextSpanStatic.vue b/frontend/components/token-classifier/results/TextSpanStatic.vue
@@ -92,6 +92,7 @@ export default {
       margin: 0;
       overscroll-behavior: contain;
       position: relative;
+      @extend %hide-scrollbar;
     }
     &__option {
       display: flex;

diff --git a/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue b/frontend/components/token-classifier/sidebar/TokenClassificationStats.vue
@@ -188,6 +188,7 @@ export default {
     padding-right: 1em;
     margin-right: -1em;
     overflow: auto;
+    @extend %hide-scrollbar;
   }
 }
 $colors: 50;