From 619423eacb29f50482c8e1545a839a1eaaa31c1b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 19 Dec 2024 14:52:01 +0200
Subject: [PATCH] move reply-quote buttons on same line as preview

---
 changelog.d/quote-buttons.fix                 |  1 +
 .../post_status_form/post_status_form.vue     | 62 ++++++++++---------
 2 files changed, 33 insertions(+), 30 deletions(-)
 create mode 100644 changelog.d/quote-buttons.fix

diff --git a/changelog.d/quote-buttons.fix b/changelog.d/quote-buttons.fix
new file mode 100644
index 00000000..859e5d6c
--- /dev/null
+++ b/changelog.d/quote-buttons.fix
@@ -0,0 +1 @@
+reply-or-quote buttons now take less space
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index cf411ff1..9ab1d332 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -103,6 +103,36 @@
               icon="circle-notch"
             />
           </div>
+          <div
+            v-if="quotable"
+            role="radiogroup"
+            class="btn-group reply-or-quote-selector"
+          >
+            <button
+              :id="`reply-or-quote-option-${randomSeed}-reply`"
+              class="btn button-default reply-or-quote-option"
+              :class="{ toggled: !newStatus.quoting }"
+              tabindex="0"
+              role="radio"
+              :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
+              :aria-checked="!newStatus.quoting"
+              @click="newStatus.quoting = false"
+            >
+              {{ $t('post_status.reply_option') }}
+            </button>
+            <button
+              :id="`reply-or-quote-option-${randomSeed}-quote`"
+              class="btn button-default reply-or-quote-option"
+              :class="{ toggled: newStatus.quoting }"
+              tabindex="0"
+              role="radio"
+              :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
+              :aria-checked="newStatus.quoting"
+              @click="newStatus.quoting = true"
+            >
+              {{ $t('post_status.quote_option') }}
+            </button>
+          </div>
         </div>
         <div
           v-if="showPreview"
@@ -126,36 +156,6 @@
             class="preview-status"
           />
         </div>
-        <div
-          v-if="quotable"
-          role="radiogroup"
-          class="btn-group reply-or-quote-selector"
-        >
-          <button
-            :id="`reply-or-quote-option-${randomSeed}-reply`"
-            class="btn button-default reply-or-quote-option"
-            :class="{ toggled: !newStatus.quoting }"
-            tabindex="0"
-            role="radio"
-            :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
-            :aria-checked="!newStatus.quoting"
-            @click="newStatus.quoting = false"
-          >
-            {{ $t('post_status.reply_option') }}
-          </button>
-          <button
-            :id="`reply-or-quote-option-${randomSeed}-quote`"
-            class="btn button-default reply-or-quote-option"
-            :class="{ toggled: newStatus.quoting }"
-            tabindex="0"
-            role="radio"
-            :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
-            :aria-checked="newStatus.quoting"
-            @click="newStatus.quoting = true"
-          >
-            {{ $t('post_status.quote_option') }}
-          </button>
-        </div>
         <EmojiInput
           v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
           v-model="newStatus.spoilerText"
@@ -447,6 +447,8 @@
 
   .reply-or-quote-selector {
     margin-bottom: 0.5em;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
   }
 
   .text-format {