diff --git a/app/assets/javascripts/discourse/app/templates/composer.hbs b/app/assets/javascripts/discourse/app/templates/composer.hbs
index 0d750b379b9..3df19168ad1 100644
--- a/app/assets/javascripts/discourse/app/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer.hbs
@@ -272,45 +272,6 @@
{{/if}}
{{/if}}
- {{#if (or this.isUploading this.isProcessingUpload)}}
-
- {{#if this.isProcessingUpload}}
- {{loading-spinner size="small"}}
{{i18n
- "upload_selector.processing"
- }}
- {{else}}
- {{loading-spinner size="small"}}
{{i18n
- "upload_selector.uploading"
- }}
- {{this.uploadProgress}}%
- {{/if}}
-
- {{#if this.isCancellable}}
-
{{d-icon "times"}}
- {{/if}}
-
- {{/if}}
-
-
- {{#if 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}}
-
- {{/if}}
-
-
{{/if}}
- {{else}}
+ {{/if}}
+
+ {{#if (or this.isUploading this.isProcessingUpload)}}
+
+ {{#if this.isProcessingUpload}}
+ {{loading-spinner size="small"}}
{{i18n
+ "upload_selector.processing"
+ }}
+ {{else}}
+ {{loading-spinner size="small"}}
{{i18n
+ "upload_selector.uploading"
+ }}
+ {{this.uploadProgress}}%
+ {{/if}}
+
+ {{#if this.isCancellable}}
+
{{d-icon "times"}}
+ {{/if}}
+
+ {{/if}}
+
+
+ {{#if 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}}
+
+ {{/if}}
+
+
+ {{#unless this.site.mobileView}}
- {{/if}}
+ {{/unless}}
{{else}}
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 9bdcc0ffb9a..f0f2856a994 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 633bf0604ec..c1c63aa610f 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -226,7 +226,6 @@ a.toggle-preview {
#draft-status,
#file-uploading {
- flex-grow: 1;
text-align: right;
}
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 136eb8880a9..8a2e73fb533 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/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,