diff --git a/packages/@uppy/status-bar/src/StatusBar.js b/packages/@uppy/status-bar/src/StatusBar.js
index 8fd12362c..54cf54ead 100644
--- a/packages/@uppy/status-bar/src/StatusBar.js
+++ b/packages/@uppy/status-bar/src/StatusBar.js
@@ -232,24 +232,36 @@ const ProgressBarProcessing = (props) => {
   </div>
 }
 
+const renderDot = () =>
+  ' \u00B7 '
+
 const ProgressDetails = (props) => {
+  const ifShowFilesUploadedOfTotal = props.numUploads > 1
+
   return <div class="uppy-StatusBar-statusSecondary">
     {
-      props.numUploads > 1 &&
+      ifShowFilesUploadedOfTotal &&
       props.i18n('filesUploadedOfTotal', {
         complete: props.complete,
         smart_count: props.numUploads
-      }) + ' \u00B7 '
+      })
     }
-    <span class="uppy-StatusBar--onlyForDesktop">
+    <span class="uppy-StatusBar-additionalInfo">
+      {/* When should we render this dot?
+        1. .-additionalInfo is shown (happens only on desktops)
+        2. AND 'filesUploadedOfTotal' was shown
+      */}
+      {ifShowFilesUploadedOfTotal && renderDot()}
+
       {
         props.i18n('dataUploadedOfTotal', {
           complete: prettyBytes(props.totalUploadedSize),
           total: prettyBytes(props.totalSize)
-        }) + ' \u00B7 '
+        })
       }
-    </span>
-    <span class="uppy-StatusBar--onlyForDesktop">
+
+      {renderDot()}
+
       {
         props.i18n('xTimeLeft', {
           time: prettyETA(props.totalETA)
diff --git a/packages/@uppy/status-bar/src/style.scss b/packages/@uppy/status-bar/src/style.scss
index 9045363ee..4a829207f 100644
--- a/packages/@uppy/status-bar/src/style.scss
+++ b/packages/@uppy/status-bar/src/style.scss
@@ -112,8 +112,8 @@
   padding-right: 0.3em;
 }
 
-// Don't display elements with class .--onlyForDesktop if we're not at least on .md
-.uppy-Root:not(.uppy-size--md) .uppy-StatusBar--onlyForDesktop {
+// Don't display elements with class .-additionalInfo if we're not at least on .md
+.uppy-Root:not(.uppy-size--md) .uppy-StatusBar-additionalInfo {
   display: none;
 }