a bit clearer draft editing flow, partially divorced menu-item from list-item

src/components/post_status_form/post_status_form.js

@@ -118,7 +118,8 @@ const PostStatusForm = {
     'resize',
     'mediaplay',
     'mediapause',
-    'can-close'
+    'can-close',
+    'update'
   ],
   components: {
     MediaUpload,
@@ -218,7 +219,7 @@ const PostStatusForm = {
       emojiInputShown: false,
       idempotencyKey: '',
       saveInhibited: true,
-      savable: false
+      saveable: false
     }
   },
   computed: {
@@ -343,7 +344,7 @@ const PostStatusForm = {
       return this.$store.getters.mergedConfig.autoSaveDraft
     },
     autoSaveState () {
-      if (this.savable) {
+      if (this.saveable) {
         return this.$t('post_status.auto_save_saving')
       } else if (this.newStatus.id) {
         return this.$t('post_status.auto_save_saved')
@@ -363,7 +364,7 @@ const PostStatusForm = {
         this.statusChanged()
       }
     },
-    savable (val) {
+    saveable (val) {
       // https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event#usage_notes
       // MDN says we'd better add the beforeunload event listener only when needed, and remove it when it's no longer needed
       if (val) {
@@ -382,7 +383,7 @@ const PostStatusForm = {
       this.autoPreview()
       this.updateIdempotencyKey()
       this.debouncedMaybeAutoSaveDraft()
-      this.savable = true
+      this.saveable = true
       this.saveInhibited = false
     },
     clearStatus () {
@@ -411,7 +412,7 @@ const PostStatusForm = {
       el.style.height = undefined
       this.error = null
       if (this.preview) this.previewStatus()
-      this.savable = false
+      this.saveable = false
     },
     async postStatus (event, newStatus, opts = {}) {
       if (this.posting && !this.optimisticPosting) { return }
@@ -754,13 +755,13 @@ const PostStatusForm = {
               if (this.newStatus.id !== id) {
                 this.newStatus.id = id
               }
-              this.savable = false
+              this.saveable = false
             })
         } else if (this.newStatus.id) {
           // There is a draft, but there is nothing in it, clear it
           return this.abandonDraft()
             .then(() => {
-              this.savable = false
+              this.saveable = false
             })
         }
       }
@@ -788,7 +789,7 @@ const PostStatusForm = {
       // No draft available, fall back
     },
     requestClose () {
-      if (!this.savable) {
+      if (!this.saveable) {
         this.$emit('can-close')
       } else {
         this.$refs.draftCloser.requestClose()

src/components/post_status_form/post_status_form.scss

@@ -5,14 +5,31 @@
     margin-bottom: 0.5em;
   }
 
+  .more-post-actions {
+    height: 100%;
+
+    .btn {
+      height: 100%;
+    }
+  }
+
   .form-bottom {
     display: flex;
     justify-content: space-between;
     padding: 0.5em;
     height: 2.5em;
 
-    .post-button {
-      width: 7.5em;
+    .post-button-group {
+      width: 10em;
+      display: flex;
+
+      .post-button {
+        flex: 1 0 auto;
+      }
+
+      .more-post-actions {
+        flex: 0 0 auto;
+      }
     }
 
     p {
@@ -22,14 +39,6 @@
     }
   }
 
-  .more-post-actions {
-    height: 100%;
-
-    .btn {
-      height: 100%;
-    }
-  }
-
   .form-bottom-left {
     display: flex;
     flex: 1;

src/components/post_status_form/post_status_form.vue

@@ -302,7 +302,7 @@
             <FAIcon icon="poll-h" />
           </button>
         </div>
-        <div class="btn-group">
+        <div class="btn-group post-button-group">
           <button
             class="btn button-default post-button"
             :disabled="isOverLengthLimit || posting || uploadingFiles || disableSubmit"