I'm trying to reduce the height of the Uppy Dashboard plugin to be 200px to increase screen real estate. I've restricted the control to a single file upload so there is no need for all the extra space in the panel.
Using the height and maxHeight options the smallest I'm able to get the dashboard is 400px height:

My configuration is as follows:
const uppy = new Uppy({
autoProceed: false,
restrictions: {
maxNumberOfFiles: 1,
minNumberOfFiles: 1,
allowedFileTypes: ["application/pdf"]
}
})
.use(Dashboard, {
target: "#uppy",
inline: true,
height: 200,
maxHeight: 200
});
How can I further reduce the height so it matches a single row of file icons?
I've noticed that the minimum height is hard set to 400px here:
https://github.com/transloadit/uppy/blob/master/packages/%40uppy/dashboard/src/style.scss#L118
.uppy-Dashboard-inner {
position: relative;
background-color: $color-almost-white;
max-width: 100%; /* no !important */
max-height: 100%; /* no !important */
min-width: 290px;
min-height: 400px;
outline: none;
border: 1px solid rgba($color-gray, 0.2);
border-radius: 5px;
.uppy-Dashboard--modal & {
z-index: $zIndex-3;
}
@media #{$screen-medium} {
width: 750px; /* no !important */
height: 550px; /* no !important */
}
}
After playing around it seems that reducing this to 320px sets the minimum height to a single row of file icons. I'll create a PR.
Set this to mobile only for now: https://github.com/transloadit/uppy/commit/14135f5f2eab23eb220e296e9571c16f6ae9bce6
I'm having a similar issue with the Uppy react component. It has a min-height property set to 450px in the uppy-Dashboard-inner class so you cannot set it below that.
I'm guessing this only needs to be toggled off when when the Dashboard react component receives a height property.
Still unable to reduce the height on uppy/react Dashboard
Most helpful comment
Still unable to reduce the height on uppy/react Dashboard