UX: improve composer control spacing on mobile (#21021)

app/assets/javascripts/discourse/app/templates/composer.hbs

@@ -272,45 +272,6 @@
               {{/if}}
             {{/if}}
 
-            {{#if (or this.isUploading this.isProcessingUpload)}}
-              <div id="file-uploading">
-                {{#if this.isProcessingUpload}}
-                  {{loading-spinner size="small"}}<span>{{i18n
-                      "upload_selector.processing"
-                    }}</span>
-                {{else}}
-                  {{loading-spinner size="small"}}<span>{{i18n
-                      "upload_selector.uploading"
-                    }}
-                    {{this.uploadProgress}}%</span>
-                {{/if}}
-
-                {{#if this.isCancellable}}
-                  <a
-                    href
-                    id="cancel-file-upload"
-                    {{on "click" this.cancelUpload}}
-                  >{{d-icon "times"}}</a>
-                {{/if}}
-              </div>
-            {{/if}}
-
-            <div class={{if this.isUploading "hidden"}} id="draft-status">
-              {{#if this.model.draftStatus}}
-                <span class="draft-error" title={{this.model.draftStatus}}>
-                  {{#if this.model.draftConflictUser}}
-                    {{avatar this.model.draftConflictUser imageSize="small"}}
-                    {{d-icon "user-edit"}}
-                  {{else}}
-                    {{d-icon "exclamation-triangle"}}
-                  {{/if}}
-                  {{#unless this.site.mobileView}}
-                    {{this.model.draftStatus}}
-                  {{/unless}}
-                </span>
-              {{/if}}
-            </div>
-
             <span>
               <PluginOutlet
                 @name="composer-after-save-or-cancel"
@@ -356,7 +317,48 @@
                 @icon="pencil-alt"
               />
             {{/if}}
-          {{else}}
+          {{/if}}
+
+          {{#if (or this.isUploading this.isProcessingUpload)}}
+            <div id="file-uploading">
+              {{#if this.isProcessingUpload}}
+                {{loading-spinner size="small"}}<span>{{i18n
+                    "upload_selector.processing"
+                  }}</span>
+              {{else}}
+                {{loading-spinner size="small"}}<span>{{i18n
+                    "upload_selector.uploading"
+                  }}
+                  {{this.uploadProgress}}%</span>
+              {{/if}}
+
+              {{#if this.isCancellable}}
+                <a
+                  href
+                  id="cancel-file-upload"
+                  {{on "click" this.cancelUpload}}
+                >{{d-icon "times"}}</a>
+              {{/if}}
+            </div>
+          {{/if}}
+
+          <div class={{if this.isUploading "hidden"}} id="draft-status">
+            {{#if this.model.draftStatus}}
+              <span class="draft-error" title={{this.model.draftStatus}}>
+                {{#if this.model.draftConflictUser}}
+                  {{avatar this.model.draftConflictUser imageSize="small"}}
+                  {{d-icon "user-edit"}}
+                {{else}}
+                  {{d-icon "exclamation-triangle"}}
+                {{/if}}
+                {{#unless this.site.mobileView}}
+                  {{this.model.draftStatus}}
+                {{/unless}}
+              </span>
+            {{/if}}
+          </div>
+
+          {{#unless this.site.mobileView}}
             <DButton
               @action={{action "togglePreview"}}
               @translatedTitle={{this.toggleText}}
@@ -366,7 +368,7 @@
                 (unless this.showPreview "active")
               }}
             />
-          {{/if}}
+          {{/unless}}
         </div>
       </div>
     {{else}}

app/assets/stylesheets/common/base/compose.scss

@@ -337,7 +337,8 @@ html.composer-open {
   .save-or-cancel {
     align-items: center;
     display: flex;
-    flex: 1 1 auto;
+    flex: 0 1 auto;
+    margin-right: 1em;
 
     .btn-primary {
       flex: 0 0 auto;
@@ -357,32 +358,36 @@ html.composer-open {
         color: var(--danger);
       }
     }
-
-    #draft-status,
-    #file-uploading {
-      margin-left: 25px;
-    }
-    #file-uploading {
-      display: flex;
-      align-items: center;
-      a {
-        margin-left: 5px;
-        color: var(--primary-high);
-      }
-      .spinner {
-        margin-right: 5px;
-      }
-    }
-    #draft-status .d-icon-user-edit {
-      color: var(--danger);
-      font-size: 20px;
-      vertical-align: -5.5px;
-    }
   }
 
   #draft-status,
   #file-uploading {
     color: var(--primary-high);
+    margin-right: 0.5em;
+  }
+
+  #file-uploading {
+    display: flex;
+    align-items: center;
+    a {
+      margin-left: 0.33em;
+      color: var(--primary-high);
+    }
+    .spinner {
+      margin-right: 0.33em;
+    }
+  }
+
+  #draft-status {
+    margin-left: auto;
+    .d-icon-user-edit {
+      color: var(--danger);
+      font-size: 20px;
+      vertical-align: -5.5px;
+    }
+    + .btn-mini-toggle {
+      margin-left: 0;
+    }
   }
 
   #file-uploader {
@@ -595,7 +600,7 @@ body:not(.ios-safari-composer-hacks) {
 }
 
 .toggle-preview {
-  margin-left: 8px;
+  margin-left: auto;
   transition: all 0.33s ease-out;
 
   &.active {

app/assets/stylesheets/desktop/compose.scss

@@ -226,7 +226,6 @@ a.toggle-preview {
 
 #draft-status,
 #file-uploading {
-  flex-grow: 1;
   text-align: right;
 }
 

app/assets/stylesheets/mobile/compose.scss

@@ -101,8 +101,18 @@
 
   .submit-panel {
     margin-top: 6px;
+    flex-wrap: wrap;
+    gap: 0.25em 0;
+
+    .create {
+      max-width: 50vw;
+      span {
+        @include ellipsis;
+      }
+    }
 
     .save-or-cancel {
+      margin-right: 0.5em;
       flex: 1 1 auto;
 
       #draft-status,