diff --git a/packages/@uppy/dashboard/src/components/Dashboard.js b/packages/@uppy/dashboard/src/components/Dashboard.js index ae5b6e57e6..f0cb02ba19 100644 --- a/packages/@uppy/dashboard/src/components/Dashboard.js +++ b/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 } ) diff --git a/packages/@uppy/dashboard/src/style.scss b/packages/@uppy/dashboard/src/style.scss index bd2c9a407e..b7f185b33f 100644 --- a/packages/@uppy/dashboard/src/style.scss +++ b/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 {