From e3e74ad9a2ba1b65bd50df9ba4640d9c983dc2b2 Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Thu, 3 Nov 2022 16:08:56 +0000
Subject: [PATCH 1/8] progress pause/resume should be white

---
 .../dashboard/src/components/FileItem/FileProgress/index.scss    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.scss b/packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.scss
index 62186cd2a1..e5d2e03612 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.scss
+++ b/packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.scss
@@ -15,6 +15,7 @@
   width: 38px;
   height: 38px;
   opacity: 0.9;
+  color: $white;
 
   .uppy-size--md & {
     width: 55px;

From 396e9958e2e5198f801bea5afb2d8bd8c289248f Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Thu, 3 Nov 2022 16:29:27 +0000
Subject: [PATCH 2/8] add uppy-c-btn to remaining buttons

---
 .../@uppy/dashboard/src/components/FileItem/Buttons/index.jsx   | 2 +-
 .../@uppy/dashboard/src/components/FileItem/FileInfo/index.jsx  | 2 +-
 .../dashboard/src/components/FileItem/FileProgress/index.jsx    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.jsx b/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.jsx
index a609e50193..0f23814d8e 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.jsx
+++ b/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.jsx
@@ -15,7 +15,7 @@ function EditButton ({
   ) {
     return (
       <button
-        className="uppy-u-reset uppy-Dashboard-Item-action uppy-Dashboard-Item-action--edit"
+        className="uppy-u-reset uppy-c-btn uppy-Dashboard-Item-action uppy-Dashboard-Item-action--edit"
         type="button"
         aria-label={i18n('editFileWithFilename', { file: file.meta.name })}
         title={i18n('editFileWithFilename', { file: file.meta.name })}
diff --git a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.jsx b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.jsx
index d1232ef7e1..d4f8ef49bd 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.jsx
+++ b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.jsx
@@ -78,7 +78,7 @@ const ErrorButton = ({ file, onClick }) => {
   if (file.error) {
     return (
       <button
-        className="uppy-u-reset uppy-Dashboard-Item-errorDetails"
+        className="uppy-u-reset uppy-c-btn uppy-Dashboard-Item-errorDetails"
         aria-label={file.error}
         data-microtip-position="bottom"
         data-microtip-size="medium"
diff --git a/packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.jsx b/packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.jsx
index 6a113ff6a9..2bb3b6c8ba 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.jsx
+++ b/packages/@uppy/dashboard/src/components/FileItem/FileProgress/index.jsx
@@ -40,7 +40,7 @@ function ProgressIndicatorButton (props) {
   return (
     <div className="uppy-Dashboard-Item-progress">
       <button
-        className="uppy-u-reset uppy-Dashboard-Item-progressIndicator"
+        className="uppy-u-reset uppy-c-btn uppy-Dashboard-Item-progressIndicator"
         type="button"
         aria-label={progressIndicatorTitle(props)}
         title={progressIndicatorTitle(props)}

From a1363f73b7b9a79d66869eaf5ed44da7812a5fab Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Thu, 3 Nov 2022 16:54:44 +0000
Subject: [PATCH 3/8] Single file mode: large preview thumbnail for single file

---
 packages/@uppy/dashboard/src/Dashboard.jsx    | 29 ++++++++++++++++++-
 .../dashboard/src/components/Dashboard.jsx    |  3 ++
 .../src/components/FileItem/index.scss        | 26 +++++++++++++++--
 .../dashboard/src/components/FileList.jsx     | 12 +++++++-
 packages/@uppy/dashboard/src/style.scss       |  7 +++++
 5 files changed, 72 insertions(+), 5 deletions(-)

diff --git a/packages/@uppy/dashboard/src/Dashboard.jsx b/packages/@uppy/dashboard/src/Dashboard.jsx
index bbb5897b5f..08d1360815 100644
--- a/packages/@uppy/dashboard/src/Dashboard.jsx
+++ b/packages/@uppy/dashboard/src/Dashboard.jsx
@@ -21,6 +21,8 @@ const memoize = memoizeOne.default || memoizeOne
 const TAB_KEY = 9
 const ESC_KEY = 27
 
+const LARGE_AMOUNT_OF_FILES = 8
+
 function createPromise () {
   const o = {}
   o.promise = new Promise((resolve, reject) => {
@@ -61,7 +63,7 @@ export default class Dashboard extends UIPlugin {
       inline: false,
       width: 750,
       height: 550,
-      thumbnailWidth: 280,
+      thumbnailWidth: 500,
       thumbnailType: 'image/jpeg',
       waitForThumbnailsBeforeUpload: false,
       defaultPickerIcon,
@@ -659,6 +661,7 @@ export default class Dashboard extends UIPlugin {
 
   handleRequestThumbnail = (file) => {
     if (!this.opts.waitForThumbnailsBeforeUpload) {
+      this.requestSmallerThumbnailsForLargeAmountOfFiles()
       this.uppy.emit('thumbnail:request', file)
     }
   }
@@ -705,6 +708,27 @@ export default class Dashboard extends UIPlugin {
     this.uppy.emit('restore-canceled')
   }
 
+  requestSmallerThumbnailsForLargeAmountOfFiles = () => {
+    console.log('_____FOR THUMBNAIL:')
+    console.log(this.uppy.getFiles().length)
+    // const shouldRequestLargeThumbnail = files.length === 1 && this.uppy.getFiles().length === 0
+    const shouldRequestSmallerThumbnails = (this.uppy.getFiles().length) >= LARGE_AMOUNT_OF_FILES
+    console.log('shouldRequestSmallerThumbnails', shouldRequestSmallerThumbnails)
+
+    if (shouldRequestSmallerThumbnails) {
+      console.log('Back to small THUMBNAIL')
+      this.uppy.getPlugin(`${this.id}:ThumbnailGenerator`)?.setOptions({
+        thumbnailWidth: 280,
+      })
+      this.smallThumbnailMode = true
+    } else if (this.smallThumbnailMode) {
+      this.uppy.getPlugin(`${this.id}:ThumbnailGenerator`)?.setOptions({
+        thumbnailWidth: this.opts.thumbnailWidth,
+      })
+      this.smallThumbnailMode = false
+    }
+  }
+
   #openFileEditorWhenFilesAdded = (files) => {
     const firstFile = files[0]
     if (this.canEditFile(firstFile)) {
@@ -732,6 +756,9 @@ export default class Dashboard extends UIPlugin {
     this.uppy.on('file-editor:complete', this.hideAllPanels)
     this.uppy.on('complete', this.handleComplete)
 
+    this.uppy.on('files-added')
+    this.uppy.on('file-removed')
+
     // ___Why fire on capture?
     //    Because this.ifFocusedOnUppyRecently needs to change before onUpdate() fires.
     document.addEventListener('focus', this.recordIfFocusedOnUppyRecently, true)
diff --git a/packages/@uppy/dashboard/src/components/Dashboard.jsx b/packages/@uppy/dashboard/src/components/Dashboard.jsx
index 7a3a1420a5..2f8311a4bd 100644
--- a/packages/@uppy/dashboard/src/components/Dashboard.jsx
+++ b/packages/@uppy/dashboard/src/components/Dashboard.jsx
@@ -20,6 +20,8 @@ const HEIGHT_MD = 400
 
 export default function Dashboard (props) {
   const noFiles = props.totalFileCount === 0
+  const singleFile = props.totalFileCount === 1
+
   const isSizeMD = props.containerWidth > WIDTH_MD
 
   const dashboardClassName = classNames({
@@ -35,6 +37,7 @@ export default function Dashboard (props) {
     'uppy-size--height-md': props.containerHeight > HEIGHT_MD,
     'uppy-Dashboard--isAddFilesPanelVisible': props.showAddFilesPanel,
     'uppy-Dashboard--isInnerWrapVisible': props.areInsidesReadyToBeVisible,
+    'uppy-Dashboard--singleFile': singleFile,
   })
 
   // Important: keep these in sync with the percent width values in `src/components/FileItem/index.scss`.
diff --git a/packages/@uppy/dashboard/src/components/FileItem/index.scss b/packages/@uppy/dashboard/src/components/FileItem/index.scss
index 7472d82584..62d31bda17 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/index.scss
+++ b/packages/@uppy/dashboard/src/components/FileItem/index.scss
@@ -8,7 +8,10 @@
   align-items: center;
   padding: 10px;
   border-bottom: 1px solid $gray-200;
-  padding-inline-end: 0;
+
+  .uppy-Dashboard:not(.uppy-Dashboard--singleFile) & {
+    padding-inline-end: 0;
+  }
 
   [data-uppy-theme="dark"] & {
     border-bottom: 1px solid $gray-800;
@@ -36,12 +39,22 @@
     width: calc(25% - #{$rl-margin} - #{$rl-margin});
     height: 190px;
     margin: 5px $rl-margin;
+    padding: 0;
   }
 
   .uppy-size--xl & {
     /* When changing width: also update `itemsPerRow` values in `src/components/Dashboard.js`. */
     width: calc(20% - #{$rl-margin} - #{$rl-margin});
     height: 210px;
+    padding: 0;
+  }
+
+  .uppy-Dashboard--singleFile & {
+    display: block;
+    width: 100%;
+    max-width: 400px;
+    height: auto;
+    border-bottom: 0;
   }
 }
 
@@ -78,12 +91,13 @@
   position: relative;
 
   // @media only mobile
-  .uppy-Dashboard:not(.uppy-size--md) & {
+  .uppy-Dashboard:not(.uppy-size--md):not(.uppy-Dashboard--singleFile) & {
     flex-grow: 0;
     flex-shrink: 0;
     width: 50px;
     height: 50px;
   }
+
   // @media bigger than .md
   .uppy-size--md & {
     width: 100%;
@@ -97,6 +111,11 @@
   .uppy-size--xl & {
     height: 140px;
   }
+
+  .uppy-Dashboard--singleFile & {
+    width: 100%;
+    height: 300px;
+  }
 }
 
 .uppy-Dashboard-Item-fileInfoAndButtons {
@@ -107,7 +126,8 @@
   padding-inline-end: 8px;
   padding-inline-start: 12px;
 
-  .uppy-size--md & {
+  .uppy-size--md &,
+  .uppy-Dashboard--singleFile & {
     align-items: flex-start;
     width: 100%;
     padding: 0;
diff --git a/packages/@uppy/dashboard/src/components/FileList.jsx b/packages/@uppy/dashboard/src/components/FileList.jsx
index 270ff331b2..9116fe9e3d 100644
--- a/packages/@uppy/dashboard/src/components/FileList.jsx
+++ b/packages/@uppy/dashboard/src/components/FileList.jsx
@@ -20,6 +20,8 @@ function chunks (list, size) {
 
 export default (props) => {
   const noFiles = props.totalFileCount === 0
+  const singleFile = props.totalFileCount === 1
+
   const dashboardFilesClass = classNames(
     'uppy-Dashboard-files',
     { 'uppy-Dashboard-files--noFiles': noFiles },
@@ -72,7 +74,7 @@ export default (props) => {
     // The `role="presentation` attribute ensures that the list items are properly
     // associated with the `VirtualList` element.
     // We use the first file ID as the key—this should not change across scroll rerenders
-    <div role="presentation" key={row[0]}>
+    <div class="uppy-Dashboard-filesInner" role="presentation" key={row[0]}>
       {row.map((fileID) => (
         <FileItem
           key={fileID}
@@ -88,6 +90,14 @@ export default (props) => {
     </div>
   )
 
+  if (singleFile) {
+    return (
+      <div class={dashboardFilesClass}>
+        {renderRow(rows[0])}
+      </div>
+    )
+  }
+
   return (
     <VirtualList
       class={dashboardFilesClass}
diff --git a/packages/@uppy/dashboard/src/style.scss b/packages/@uppy/dashboard/src/style.scss
index ebcb2310eb..2e702def2b 100644
--- a/packages/@uppy/dashboard/src/style.scss
+++ b/packages/@uppy/dashboard/src/style.scss
@@ -727,6 +727,13 @@
   }
 }
 
+.uppy-Dashboard--singleFile .uppy-Dashboard-filesInner  {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
 .uppy-Dashboard-dropFilesHereHint {
   position: absolute;
   top: 7px;

From 56717da438468589435f287b0467fd6e0a57ff7a Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Fri, 4 Nov 2022 16:25:45 +0000
Subject: [PATCH 4/8] tweak icon and FileItem sizes

---
 .../components/FileItem/Buttons/index.scss    | 31 ++++++++++---------
 .../components/FileItem/FileInfo/index.scss   |  5 +++
 .../src/components/FileItem/index.scss        |  5 ++-
 packages/@uppy/dashboard/src/style.scss       |  9 ++++++
 4 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.scss b/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.scss
index f5c02e1201..133e21e41b 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.scss
+++ b/packages/@uppy/dashboard/src/components/FileItem/Buttons/index.scss
@@ -30,6 +30,21 @@
     opacity: 1;
   }
 
+  .uppy-size--md &,
+  .uppy-Dashboard--singleFile & {
+    position: absolute;
+    top: -8px;
+    z-index: $zIndex-3;
+    width: 18px;
+    height: 18px;
+    padding: 0;
+    inset-inline-end: -8px;
+
+    &:focus {
+      border-radius: 50%;
+    }
+  }
+
   [data-uppy-theme="dark"] & {
     color: $gray-700;
   }
@@ -40,7 +55,7 @@
 }
 
 // Only for mobile screens
-.uppy-Dashboard:not(.uppy-size--md) {
+.uppy-Dashboard:not(.uppy-size--md):not(.uppy-Dashboard--singleFile) {
   // Vertically center Edit&Remove buttons on mobile
   .uppy-Dashboard-Item-actionWrapper {
     display: flex;
@@ -71,18 +86,4 @@
       border-radius: 3px;
     }
   }
-  // Remove button is in the top right corner
-  .uppy-Dashboard-Item-action--remove {
-    position: absolute;
-    top: -8px;
-    z-index: $zIndex-3;
-    width: 18px;
-    height: 18px;
-    padding: 0;
-    inset-inline-end: -8px;
-
-    &:focus {
-      border-radius: 50%;
-    }
-  }
 }
diff --git a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss
index c3ccdfb653..a7522db1af 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss
+++ b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss
@@ -15,6 +15,11 @@
   [data-uppy-theme="dark"] & {
     color: $gray-200;
   }
+
+  .uppy-size--md.uppy-Dashboard--singleFile & {
+    font-size: 14px;
+    line-height: 1.4;
+  }
 }
 
 .uppy-Dashboard-Item-fileName {
diff --git a/packages/@uppy/dashboard/src/components/FileItem/index.scss b/packages/@uppy/dashboard/src/components/FileItem/index.scss
index 62d31bda17..e195a77e70 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/index.scss
+++ b/packages/@uppy/dashboard/src/components/FileItem/index.scss
@@ -55,6 +55,9 @@
     max-width: 400px;
     height: auto;
     border-bottom: 0;
+    position: relative;
+    padding: 0;
+    margin: 10px;
   }
 }
 
@@ -114,7 +117,7 @@
 
   .uppy-Dashboard--singleFile & {
     width: 100%;
-    height: 300px;
+    height: 270px;
   }
 }
 
diff --git a/packages/@uppy/dashboard/src/style.scss b/packages/@uppy/dashboard/src/style.scss
index 2e702def2b..3936271b86 100644
--- a/packages/@uppy/dashboard/src/style.scss
+++ b/packages/@uppy/dashboard/src/style.scss
@@ -874,12 +874,21 @@ a.uppy-Dashboard-poweredBy {
     width: 100%;
     height: 100%;
   }
+
+  .uppy-Dashboard--singleFile & {
+    width: 90px;
+    height: 90px;
+  }
 }
 
 .uppy-Dashboard-Item-previewIconWrap {
   position: relative;
   height: 76px;
   max-height: 75%;
+
+  .uppy-Dashboard--singleFile & {
+    height: 176px;
+  }
 }
 
 .uppy-Dashboard-Item-previewIconBg {

From ea80f814f295df08548a7719e965575a8c4adcb3 Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Fri, 4 Nov 2022 16:46:15 +0000
Subject: [PATCH 5/8] check for single file mode when files are added or
 removed

---
 packages/@uppy/dashboard/src/Dashboard.jsx | 40 +++++++++-------------
 1 file changed, 17 insertions(+), 23 deletions(-)

diff --git a/packages/@uppy/dashboard/src/Dashboard.jsx b/packages/@uppy/dashboard/src/Dashboard.jsx
index 08d1360815..08cf3dd21c 100644
--- a/packages/@uppy/dashboard/src/Dashboard.jsx
+++ b/packages/@uppy/dashboard/src/Dashboard.jsx
@@ -21,8 +21,6 @@ const memoize = memoizeOne.default || memoizeOne
 const TAB_KEY = 9
 const ESC_KEY = 27
 
-const LARGE_AMOUNT_OF_FILES = 8
-
 function createPromise () {
   const o = {}
   o.promise = new Promise((resolve, reject) => {
@@ -63,7 +61,7 @@ export default class Dashboard extends UIPlugin {
       inline: false,
       width: 750,
       height: 550,
-      thumbnailWidth: 500,
+      thumbnailWidth: 280,
       thumbnailType: 'image/jpeg',
       waitForThumbnailsBeforeUpload: false,
       defaultPickerIcon,
@@ -661,7 +659,6 @@ export default class Dashboard extends UIPlugin {
 
   handleRequestThumbnail = (file) => {
     if (!this.opts.waitForThumbnailsBeforeUpload) {
-      this.requestSmallerThumbnailsForLargeAmountOfFiles()
       this.uppy.emit('thumbnail:request', file)
     }
   }
@@ -708,24 +705,21 @@ export default class Dashboard extends UIPlugin {
     this.uppy.emit('restore-canceled')
   }
 
-  requestSmallerThumbnailsForLargeAmountOfFiles = () => {
-    console.log('_____FOR THUMBNAIL:')
-    console.log(this.uppy.getFiles().length)
-    // const shouldRequestLargeThumbnail = files.length === 1 && this.uppy.getFiles().length === 0
-    const shouldRequestSmallerThumbnails = (this.uppy.getFiles().length) >= LARGE_AMOUNT_OF_FILES
-    console.log('shouldRequestSmallerThumbnails', shouldRequestSmallerThumbnails)
-
-    if (shouldRequestSmallerThumbnails) {
-      console.log('Back to small THUMBNAIL')
-      this.uppy.getPlugin(`${this.id}:ThumbnailGenerator`)?.setOptions({
-        thumbnailWidth: 280,
-      })
-      this.smallThumbnailMode = true
-    } else if (this.smallThumbnailMode) {
-      this.uppy.getPlugin(`${this.id}:ThumbnailGenerator`)?.setOptions({
-        thumbnailWidth: this.opts.thumbnailWidth,
+  #generateLargeThumbnailIfSingleFile = () => {
+    if (this.opts.disableThumbnailGenerator) {
+      return
+    }
+
+    const LARGE_THUMBNAIL = 600
+    const files = this.uppy.getFiles()
+
+    if (files.length === 1) {
+      const thumbnailGenerator = this.uppy.getPlugin(`${this.id}:ThumbnailGenerator`)
+      thumbnailGenerator?.setOptions({ thumbnailWidth: LARGE_THUMBNAIL })
+      const fileForThumbnail = { ...files[0], preview: undefined }
+      thumbnailGenerator.requestThumbnail(fileForThumbnail).then(() => {
+        thumbnailGenerator?.setOptions({ thumbnailWidth: this.opts.thumbnailWidth })
       })
-      this.smallThumbnailMode = false
     }
   }
 
@@ -756,8 +750,8 @@ export default class Dashboard extends UIPlugin {
     this.uppy.on('file-editor:complete', this.hideAllPanels)
     this.uppy.on('complete', this.handleComplete)
 
-    this.uppy.on('files-added')
-    this.uppy.on('file-removed')
+    this.uppy.on('files-added', this.#generateLargeThumbnailIfSingleFile)
+    this.uppy.on('file-removed', this.#generateLargeThumbnailIfSingleFile)
 
     // ___Why fire on capture?
     //    Because this.ifFocusedOnUppyRecently needs to change before onUpdate() fires.

From 2e8db05af4388c7b748f28d60f93a2d39229888e Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Tue, 8 Nov 2022 18:54:03 +0000
Subject: [PATCH 6/8] Don't shorted file names in single file mode

---
 packages/@uppy/dashboard/src/components/Dashboard.jsx     | 1 +
 .../dashboard/src/components/FileItem/FileInfo/index.jsx  | 3 +++
 .../dashboard/src/components/FileItem/FileInfo/index.scss | 8 ++++++++
 .../@uppy/dashboard/src/components/FileItem/index.jsx     | 1 +
 packages/@uppy/dashboard/src/components/FileList.jsx      | 1 +
 5 files changed, 14 insertions(+)

diff --git a/packages/@uppy/dashboard/src/components/Dashboard.jsx b/packages/@uppy/dashboard/src/components/Dashboard.jsx
index 2f8311a4bd..afdb0e42f0 100644
--- a/packages/@uppy/dashboard/src/components/Dashboard.jsx
+++ b/packages/@uppy/dashboard/src/components/Dashboard.jsx
@@ -138,6 +138,7 @@ export default function Dashboard (props) {
             <FileList
               // eslint-disable-next-line react/jsx-props-no-spreading
               {...props}
+              singleFile={singleFile}
               itemsPerRow={itemsPerRow}
             />
           ) : (
diff --git a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.jsx b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.jsx
index d4f8ef49bd..0482aa5617 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.jsx
+++ b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.jsx
@@ -7,6 +7,9 @@ const renderFileName = (props) => {
   const { author, name } = props.file.meta
 
   function getMaxNameLength () {
+    if (props.singleFile) {
+      return 200
+    }
     if (props.containerWidth <= 352) {
       return 35
     }
diff --git a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss
index a7522db1af..ddf3fdfeda 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss
+++ b/packages/@uppy/dashboard/src/components/FileItem/FileInfo/index.scss
@@ -1,5 +1,13 @@
 .uppy-Dashboard-Item-fileInfo {
   padding-inline-end: 5px;
+
+  .uppy-Dashboard--singleFile & {
+    padding-inline-end: 10px;
+  }
+
+  .uppy-size--md.uppy-Dashboard--singleFile & {
+    padding-inline-end: 15px;
+  }
 }
 
 .uppy-Dashboard-Item-name {
diff --git a/packages/@uppy/dashboard/src/components/FileItem/index.jsx b/packages/@uppy/dashboard/src/components/FileItem/index.jsx
index 8b1da9821e..d17934d3e6 100644
--- a/packages/@uppy/dashboard/src/components/FileItem/index.jsx
+++ b/packages/@uppy/dashboard/src/components/FileItem/index.jsx
@@ -106,6 +106,7 @@ export default class FileItem extends Component {
             toggleAddFilesPanel={this.props.toggleAddFilesPanel}
             toggleFileCard={this.props.toggleFileCard}
             metaFields={this.props.metaFields}
+            singleFile={this.props.singleFile}
           />
           <Buttons
             file={file}
diff --git a/packages/@uppy/dashboard/src/components/FileList.jsx b/packages/@uppy/dashboard/src/components/FileList.jsx
index 9116fe9e3d..646c3c2888 100644
--- a/packages/@uppy/dashboard/src/components/FileList.jsx
+++ b/packages/@uppy/dashboard/src/components/FileList.jsx
@@ -55,6 +55,7 @@ export default (props) => {
     isWide: props.isWide,
     metaFields: props.metaFields,
     recoveredState: props.recoveredState,
+    singleFile,
     // callbacks
     toggleFileCard: props.toggleFileCard,
     handleRequestThumbnail: props.handleRequestThumbnail,

From 1bc09da3024be0030a76bfb081622d88ab97af9e Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Tue, 8 Nov 2022 19:02:35 +0000
Subject: [PATCH 7/8] Refactor a bit

---
 .../@uppy/dashboard/src/components/FileList.jsx | 17 ++++-------------
 1 file changed, 4 insertions(+), 13 deletions(-)

diff --git a/packages/@uppy/dashboard/src/components/FileList.jsx b/packages/@uppy/dashboard/src/components/FileList.jsx
index 646c3c2888..9e248a8e50 100644
--- a/packages/@uppy/dashboard/src/components/FileList.jsx
+++ b/packages/@uppy/dashboard/src/components/FileList.jsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames'
 import { h } from 'preact'
 import FileItem from './FileItem/index.jsx'
 import VirtualList from './VirtualList.jsx'
@@ -19,14 +18,6 @@ function chunks (list, size) {
 }
 
 export default (props) => {
-  const noFiles = props.totalFileCount === 0
-  const singleFile = props.totalFileCount === 1
-
-  const dashboardFilesClass = classNames(
-    'uppy-Dashboard-files',
-    { 'uppy-Dashboard-files--noFiles': noFiles },
-  )
-
   // It's not great that this is hardcoded!
   // It's ESPECIALLY not great that this is checking against `itemsPerRow`!
   const rowHeight = props.itemsPerRow === 1
@@ -55,7 +46,7 @@ export default (props) => {
     isWide: props.isWide,
     metaFields: props.metaFields,
     recoveredState: props.recoveredState,
-    singleFile,
+    singleFile: props.singleFile,
     // callbacks
     toggleFileCard: props.toggleFileCard,
     handleRequestThumbnail: props.handleRequestThumbnail,
@@ -91,9 +82,9 @@ export default (props) => {
     </div>
   )
 
-  if (singleFile) {
+  if (props.singleFile) {
     return (
-      <div class={dashboardFilesClass}>
+      <div class="uppy-Dashboard-files">
         {renderRow(rows[0])}
       </div>
     )
@@ -101,7 +92,7 @@ export default (props) => {
 
   return (
     <VirtualList
-      class={dashboardFilesClass}
+      class="uppy-Dashboard-files"
       role="list"
       data={rows}
       renderRow={renderRow}

From b2769866e09381fa7086fc0ab0df550dc9ce361f Mon Sep 17 00:00:00 2001
From: Artur Paikin <artur@arturpaikin.com>
Date: Wed, 9 Nov 2022 13:29:07 +0000
Subject: [PATCH 8/8] remove events on uninstall

---
 packages/@uppy/dashboard/src/Dashboard.jsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/@uppy/dashboard/src/Dashboard.jsx b/packages/@uppy/dashboard/src/Dashboard.jsx
index 08cf3dd21c..fca44f4fe0 100644
--- a/packages/@uppy/dashboard/src/Dashboard.jsx
+++ b/packages/@uppy/dashboard/src/Dashboard.jsx
@@ -783,6 +783,9 @@ export default class Dashboard extends UIPlugin {
     this.uppy.off('file-editor:complete', this.hideAllPanels)
     this.uppy.off('complete', this.handleComplete)
 
+    this.uppy.off('files-added', this.#generateLargeThumbnailIfSingleFile)
+    this.uppy.off('file-removed', this.#generateLargeThumbnailIfSingleFile)
+
     document.removeEventListener('focus', this.recordIfFocusedOnUppyRecently)
     document.removeEventListener('click', this.recordIfFocusedOnUppyRecently)