fix styles for Safari and others, rename defaultViewType --> viewType

src/generic-provider-views/Browser.js

@@ -12,7 +12,7 @@ module.exports = (props) => {
   }
 
   return html`
-    <div class="Browser Browser-viewType--${props.defaultViewType}">
+    <div class="Browser Browser-viewType--${props.viewType}">
       <header class="Browser-header">
         <div class="Browser-search" aria-hidden="${!props.isSearchVisible}">
           <input type="text" class="Browser-searchInput" placeholder="Search"

src/generic-provider-views/Table.js

@@ -15,8 +15,8 @@ module.exports = (props) => {
   // </thead>
 
   return html`
-    <table class="BrowserTable">
-      <tbody onscroll=${props.handleScroll}>
+    <table class="BrowserTable" onscroll=${props.handleScroll}>
+      <tbody>
         ${props.folders.map((folder) => {
           return Row({
             title: props.getItemName(folder),

src/generic-provider-views/index.js

@@ -47,7 +47,7 @@ module.exports = class View {
 
     // set default options
     const defaultOptions = {
-      defaultViewType: 'list'
+      viewType: 'list'
     }
 
     // merge default options with the ones set by user
@@ -379,7 +379,7 @@ module.exports = class View {
       getItemIcon: this.plugin.getItemIcon,
       handleScroll: this.handleScroll,
       title: this.plugin.title,
-      defaultViewType: this.opts.defaultViewType
+      viewType: this.opts.viewType
     })
 
     return Browser(browserProps)

src/plugins/Instagram/index.js

@@ -45,7 +45,7 @@ module.exports = class Instagram extends Plugin {
 
   install () {
     this.view = new View(this, {
-      defaultViewType: 'grid'
+      viewType: 'grid'
     })
     // Set default state for Google Drive
     this.core.setState({

src/plugins/MetaData.js

@@ -27,7 +27,6 @@ module.exports = class MetaData extends Plugin {
     metaFields.forEach((item) => {
       const obj = {}
       obj[item.id] = item.value
-      console.log(obj)
       this.core.updateMeta(obj, fileID)
     })
   }

src/scss/_provider.scss

@@ -233,6 +233,8 @@
   display: flex;
   align-items: center;
   padding-left: 16px;
+  background-color: lighten($color-gray, 40%);
+  z-index: $zIndex-2;
 }
 
 .Browser-search {
@@ -283,7 +285,8 @@
   width: 12px;
   color: $color-gray;
   transition: all .2s;
-  margin-right: 16px;
+  position: relative;
+  right: 16px;
 
   &:hover {
     color: $color-black;
@@ -335,15 +338,22 @@
 
 .Browser-body {
   flex: 1;
+  position: relative;
 }
 
 .BrowserTable {
   display: block;
   width: 100%;
   height: 100%;
-  background-color: white;
+  background-color: $color-white;
   border-spacing: 0;
-  position: relative;
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .Browser-viewType--grid {
@@ -353,19 +363,34 @@
     flex-wrap: wrap;
     justify-content: space-around;
   }
+
+  // .BrowserTable tbody:after {
+  //   content: "";
+  //   flex: auto;
+  // }
+
+  .BrowserTable-column {
+    // width: 100px;
+    padding: 15px 12px;
+  }
 }
 
 .BrowserTable tbody {
   display: block;
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
 }
 
+
+// .BrowserTable tbody {
+//   display: block;
+//   overflow-x: hidden;
+//   overflow-y: auto;
+//   position: absolute;
+//   top: 0;
+//   bottom: 0;
+//   left: 0;
+//   right: 0;
+// }
+
 .BrowserTable-row {
   // border-bottom: 1px solid #eee;
   display: block;
@@ -375,7 +400,6 @@
 
 .BrowserTable-header {
   display: block;
-  // border-bottom: 1px solid #eee;
 }
 
   .BrowserTable-header:hover {
@@ -386,7 +410,7 @@
   color: $color-asphalt-gray;
   line-height: 1.2;
   font-weight: bold;
-  padding: 17px 16px;
+  padding: 16px;
 }
 
 .BrowserTable-column img {