Merge pull request #1235 from metabase/ie_scrollbars

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

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

@@ -130,7 +130,6 @@ export default class MetadataField extends Component {
                                     value={_.find(MetabaseCore.field_special_types, (type) => type.id === this.props.field.special_type)}
                                     options={MetabaseCore.field_special_types}
                                     onChange={this.onSpecialTypeChange}
-                                    showScrollbars={true}
                                 />
                                 {targetSelect}
                             </div>

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/ColumnarSelector.jsx

@@ -6,8 +6,7 @@ import cx from "classnames";
 
 export default class ColumnarSelector extends Component {
     static propTypes = {
-        columns: PropTypes.array.isRequired,
-        showScrollbars: PropTypes.bool
+        columns: PropTypes.array.isRequired
     };
 
     render() {
@@ -57,7 +56,7 @@ export default class ColumnarSelector extends Component {
             }
 
             return (
-                <div key={columnIndex} className={cx("ColumnarSelector-column", { "scroll-show": this.props.showScrollbars })}>
+                <div key={columnIndex} className="ColumnarSelector-column scroll-y scroll-show">
                     {sectionElements}
                 </div>
             );

frontend/src/components/Select.jsx

@@ -11,8 +11,7 @@ export default class Select extends Component {
         placeholder: PropTypes.string,
         onChange: PropTypes.func,
         optionNameFn: PropTypes.func,
-        optionValueFn: PropTypes.func,
-        showScrollbars: PropTypes.bool
+        optionValueFn: PropTypes.func
     };
 
     static defaultProps = {
@@ -64,7 +63,6 @@ export default class Select extends Component {
                                 triggerClasses={"AdminSelect " + (this.props.className || "")}>
                 <ColumnarSelector
                     columns={columns}
-                    showScrollbars={this.props.showScrollbars}
                 />
             </PopoverWithTrigger>
         );

frontend/src/components/columnar_selector/columnar_selector.css

@@ -9,7 +9,6 @@
     min-width: 180px;
     min-height: 300px;
     max-height: 340px;
-    overflow-y: scroll;
     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>