Various scroll bar fixes for non-Mac platforms (a.k.a. we forgot 'overflow: auto' exists)

frontend/src/admin/metadata/components/MetadataSchema.jsx

@@ -37,7 +37,7 @@ export default class MetadataSchema extends Component {
                         <div className="flex-half px1">Data Type</div>
                         <div className="flex-half px1">Additional Info</div>
                     </div>
-                    <ol className="border-top border-bottom scroll-y">
+                    <ol className="border-top border-bottom">
                         {fields}
                     </ol>
                 </div>

frontend/src/admin/metadata/components/MetadataTable.jsx

@@ -110,7 +110,7 @@ export default class MetadataTable extends Component {
                             <div className="flex-half px1">Details</div>
                         </div>
                     </div>
-                    <ol className="border-top border-bottom scroll-y">
+                    <ol className="border-top border-bottom">
                         {fields}
                     </ol>
                 </div>

frontend/src/components/columnar_selector/columnar_selector.css

@@ -9,7 +9,7 @@
     min-width: 180px;
     min-height: 300px;
     max-height: 340px;
-    overflow-y: scroll;
+    overflow-y: auto;
     flex: 1;
 }
 

frontend/src/components/modal/modal.css

@@ -26,7 +26,7 @@
   outline: none;
 
   max-height: 90%;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .Modal.Modal--small {

frontend/src/components/sortable_item_list/sortable_item_list.css

 .SortableItemList-list {
-    overflow-y: scroll;
+    overflow-y: auto;
 }

frontend/src/css/core/layout.css

@@ -28,8 +28,8 @@
   height: 100vh;
 }
 
-.scroll-y { overflow-y: scroll; }
-.scroll-x { overflow-x: scroll; }
+.scroll-y { overflow-y: auto; }
+.scroll-x { overflow-x: auto; }
 
 /* display utilities */
 .block        { display: block; }

frontend/src/css/query_builder.css

@@ -73,7 +73,8 @@
 
 .Query-filters {
     display: flex;
-    overflow-x: scroll;
+    overflow-x: auto;
+    overflow-y: hidden;
     max-width: 400px;
     white-space: nowrap;
     height: 55px;
@@ -121,11 +122,11 @@
 
 .SelectionList {
     padding-top: 5px;
+    overflow-y: auto;
+    max-height: 340px;
 }
 
 .SelectionItems {
-    overflow-y: scroll;
-    max-height: 340px;
     max-width: 320px;
 }
 

frontend/src/query_builder/SelectionModule.jsx

@@ -180,8 +180,7 @@ export default class SelectionModule extends Component {
 
     renderPopover(selection) {
         if(this.state.open) {
-            var itemListClasses = cx({
-                'SelectionItems': true,
+            var itemListClasses = cx("SelectionItems", {
                 'SelectionItems--open': this.state.open,
                 'SelectionItems--expanded': this.state.expanded
             });
@@ -198,7 +197,7 @@ export default class SelectionModule extends Component {
                 >
                     <div className={itemListClasses}>
                         {searchBar}
-                        <ul className="SelectionList">
+                        <ul className="SelectionList scroll-show scroll-y">
                             {this._listItems(selection)}
                         </ul>
                     </div>