Replace `overflow-y: scroll` with `overflow-y: auto`

A number of components used `overflow-y`: scroll, which forces
scrollbars to be always visible. To work around this, `commons.scss` hid
webkit scrollbars globally. There are two problems with this: on
non-webkit browsers, scrollbars are visible even when they are
unnecessary; and scrollbars are hidden in webkit browsers, even on
elements where they may be desirable.

Instead, we use `overflow-y: auto`, and hide webkit scrollbars on
specific components when necessary.  Unfortunately, this requires using
element selectors, but this is the trade-off for better supporting
non-webkit browsers and allowing scrollbars on regular elements (like
body).

Fixes #218

components/autocomplete/style.scss

@@ -20,6 +20,10 @@
       margin-top: - $input-underline-height;
     }
   }
+  ul.suggestions::-webkit-scrollbar {
+    height: 0;
+    width: 0;
+  }
 }
 
 .label {
@@ -51,7 +55,7 @@
   width: 100%;
   max-height: 0;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
   visibility: hidden;
   background-color: $autocomplete-suggestions-background;
   transition-timing-function: $animation-curve-default;

components/commons.scss

@@ -47,11 +47,6 @@ a {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-::-webkit-scrollbar {
-  width: 0;
-  height: 0;
-}
-
 input:not([type="checkbox"]):not([type="radio"]), button {
   outline: none;
   appearance: none;

components/date_picker/style.calendar.scss

@@ -8,6 +8,7 @@
   line-height: $calendar-row-height;
   text-align: center;
   background: $calendar-primary-contrast-color;
+  overflow-x: hidden;
   .prev, .next {
     position: absolute;
     top: 0;
@@ -32,7 +33,8 @@
 
 .years {
   height: 100%;
-  overflow: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
   font-size: $font-size-big;
   > li {
     line-height: 2.4;

components/drawer/style.scss

@@ -8,7 +8,8 @@
   display: block;
   width: $drawer-width;
   height: 100%;
-  overflow-y: scroll;
+  overflow-x: hidden;
+  overflow-y: auto;
   color: $drawer-text-color;
   pointer-events: none;
   background-color: $drawer-background-color;

components/dropdown/style.scss

@@ -42,6 +42,10 @@
     top: auto;
     bottom: 0;
   }
+  ul.values::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+  }
 }
 
 .label {
@@ -54,7 +58,7 @@
   z-index: 2;
   width: 100%;
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: auto;
   list-style: none;
   background-color: $dropdown-color-white;
   border-radius: $dropdown-value-border-radius;

docs/app/components/layout/main/components/playground.scss

@@ -3,7 +3,7 @@
 .editor, .preview {
   position: absolute;
   right: 0;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .editor {

docs/app/components/markdown/style.scss

@@ -19,7 +19,7 @@ $documentation-table-font-size: 1.4 * $unit;
   max-height: 100%;
   flex-grow: 1;
   padding-bottom: 4 * $unit;
-  overflow-y: scroll;
+  overflow-y: auto;
   font-size: $font-size-normal;
   color: $color-text;
   > *:not(pre) {