Merge pull request #1398 from lakesare/fix/even-out-files-in-dashboard

Dashboard Plugin: made list items even out

packages/@uppy/dashboard/src/components/Dashboard.js

@@ -35,6 +35,7 @@ module.exports = function Dashboard (props) {
     { 'uppy-Dashboard--modal': !props.inline },
     { 'uppy-size--md': props.containerWidth > 576 },
     { 'uppy-size--lg': props.containerWidth > 700 },
+    { 'uppy-size--xl': props.containerWidth > 900 },
     { 'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel },
     { 'uppy-Dashboard--isInnerWrapVisible': props.areInsidesReadyToBeVisible }
   )

packages/@uppy/dashboard/src/style.scss

@@ -620,18 +620,30 @@ a.uppy-Dashboard-poweredBy {
   padding-bottom: 10px;
   padding-left: 10px;
 
+  $rl-margin: 15px;
   .uppy-size--md & {
-    flex-direction: column;
     float: left;
-    width: 140px;
+    margin: 5px $rl-margin;
+    width: calc(33.333% - #{$rl-margin} - #{$rl-margin});
     height: 170px;
-    margin: 5px 15px;
-    border: 0;
+
+    flex-direction: column;
     background-color: initial;
+    border: 0;
     border-bottom: none;
     padding-bottom: 0;
     padding-left: 0;
   }
+
+  .uppy-size--lg & {
+    width: calc(25% - #{$rl-margin} - #{$rl-margin});
+    height: 190px;
+  }
+
+  .uppy-size--xl & {
+    width: calc(20% - #{$rl-margin} - #{$rl-margin});
+    height: 210px;
+  }
 }
 
 .uppy-DashboardItem-preview {
@@ -648,6 +660,14 @@ a.uppy-Dashboard-poweredBy {
     height: 100px;
     border: 0;
   }
+
+  .uppy-size--lg & {
+    height: 120px;
+  }
+
+  .uppy-size--xl & {
+    height: 140px;
+  }
 }
 
 .uppy-DashboardItem-previewLink {