replace quote/reply with radiogroup and made it wrap

src/components/post_status_form/post_status_form.js

@@ -373,14 +373,20 @@ const PostStatusForm = {
     quotable() {
       return this.quotingAvailable && this.replyTo
     },
-    quoteThreadToggled() {
+    quoteThreadToggled: {
-      return this.newStatus.hasQuote && this.newStatus.quote.thread
+      get() {
+        return this.newStatus.hasQuote && this.newStatus.quote.thread
+      },
+      set(value) {
+        this.newStatus.hasQuote = value
+        this.newStatus.quote.thread = value
+        this.newStatus.quote.id = value ? this.replyTo : ''
+      }
     },
     defaultQuotable() {
       if (
         !this.quotingAvailable ||
-        !this.isReply ||
+        !this.isReply
-        !this.$store.getters.mergedConfig.quoteReply
       ) {
         return false
       }
@@ -868,11 +874,6 @@ const PostStatusForm = {
       quote.url = ''
       quote.thread = quotable
     },
-    setQuoteThread(v) {
-      this.newStatus.hasQuote = v
-      this.newStatus.quote.thread = v
-      this.newStatus.quote.id = v ? this.replyTo : ''
-    },
     clearQuoteForm() {
       if (this.$refs.quoteForm) {
         this.$refs.quoteForm.clear()

src/components/post_status_form/post_status_form.scss

@@ -90,9 +90,10 @@
   }
 
   .reply-or-quote-selector {
-    flex: 1 0 auto;
+    flex-wrap: wrap;
     margin-bottom: 0.5em;
-    display: grid;
+    gap: 1em;
+    display: flex;
     grid-template-columns: 1fr 1fr;
   }
 

src/components/post_status_form/post_status_form.vue

@@ -88,7 +88,7 @@
         </div>
         <div
           v-if="!disablePreview"
-          class="preview-heading faint"
+          class="preview-heading"
         >
           <a
             class="preview-toggle faint"
@@ -110,34 +110,23 @@
           <div
             v-if="quotable"
             role="radiogroup"
-            class="btn-group reply-or-quote-selector"
+            class="reply-or-quote-selector"
           >
-            <button
+            <Checkbox
-              :id="`reply-or-quote-option-${randomSeed}-reply`"
-              class="btn button-default reply-or-quote-option"
-              :class="{ toggled: !quoteThreadToggled }"
-              tabindex="0"
               role="radio"
-              :disabled="quoteFormVisible"
+              :radio="true"
-              :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
+              :model-value="!quoteThreadToggled"
-              :aria-checked="!newStatus.quote.thread"
+              @update:model-value="e => quoteThreadToggled = !e"
-              @click="setQuoteThread(false)"
             >
               {{ $t('post_status.reply_option') }}
-            </button>
+            </Checkbox>
-            <button
+            <Checkbox
-              :id="`reply-or-quote-option-${randomSeed}-quote`"
+              v-model="quoteThreadToggled"
-              class="btn button-default reply-or-quote-option"
+              :radio="true"
-              :class="{ toggled: quoteThreadToggled }"
-              tabindex="0"
-              role="radio"
               :disabled="quoteFormVisible"
-              :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
-              :aria-checked="newStatus.quote.thread"
-              @click="setQuoteThread(true)"
             >
               {{ $t('post_status.quote_option') }}
-            </button>
+            </Checkbox>
           </div>
         </div>
         <div