From 447141e9b226aed0396a0c4c263892aeb33821bc Mon Sep 17 00:00:00 2001
From: Jeremy Kescher <jeremy@kescher.at>
Date: Sat, 4 Jan 2025 03:08:07 +0100
Subject: [PATCH] Put character counter always below text field

---
 README.md                                                    | 5 +++--
 .../glitch/features/compose/components/compose_form.jsx      | 2 +-
 app/javascript/flavours/glitch/styles/components.scss        | 4 ++++
 .../mastodon/features/compose/components/compose_form.jsx    | 2 +-
 app/javascript/styles/mastodon/components.scss               | 4 ++++
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index fd6bf9a0ae..acf6678c90 100644
--- a/README.md
+++ b/README.md
@@ -49,13 +49,14 @@ For production, it is suggested you run:
   - Useful for situations where the instance may not have up-to-date IP information, such as when the period of IP
     address retention is set to a low value (see _Previous differences now merged into vanilla Mastodon_)
 - Environment variable `MASTODON_USE_LIBVIPS` is true by default.
-  - This is a minor change, but it _requires_ all systems running Catstodon to run a recent libvips version (8.13+).
+  - This is a minor change, but it _requires_ all systems running Catstodon to run a recent libvips version (8.13+), except if this variable is explicitly set to false.
   - Vanilla Mastodon intends to deprecate ImageMagick anyway, so sooner or later, this change will cease being one.
 - Allow dashes in emoji shortcodes
   - This is simply to allow custom emoji compat with other fedi software.
   - Original patch by hazycora: https://github.com/TheEssem/mastodon/commit/2dde7a25a47a23f827e2fd2d07f55438f9985181
-- Allow appending "?unrestricted_preview=true" to post links to bypass CWs and sensitive-markings of media for link
+- Allow appending `?unrestricted_preview=true` to post links to bypass CWs and sensitive-markings of media for link
   previews.
+- In the compose form, the character counter is now always below the text field.
 
 ## Contributions to glitch-soc Mastodon
 
diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
index ffed051c37..52ca9896c2 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.jsx
@@ -304,6 +304,7 @@ class ComposeForm extends ImmutablePureComponent {
               lang={this.props.lang}
             />
           </div>
+          <CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
 
           <UploadForm />
           <PollForm />
@@ -323,7 +324,6 @@ class ComposeForm extends ImmutablePureComponent {
                 <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
                 <FederationButton />
                 <ThreadModeButton />
-                <CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
               </div>
 
               <div className='compose-form__submit'>
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 80ce8f9b9e..5e14f02fff 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -560,6 +560,10 @@ body > [data-popper-placement] {
       transition: none;
       border-color: $ui-highlight-color;
     }
+
+    .character-counter {
+      margin-inline-end: 0.5rem;
+    }
   }
 
   &__warning {
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.jsx b/app/javascript/mastodon/features/compose/components/compose_form.jsx
index b5e8dabb7b..5324f7ce7e 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.jsx
+++ b/app/javascript/mastodon/features/compose/components/compose_form.jsx
@@ -279,6 +279,7 @@ class ComposeForm extends ImmutablePureComponent {
               lang={this.props.lang}
             />
           </div>
+          <CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
 
           <UploadForm />
           <PollForm />
@@ -295,7 +296,6 @@ class ComposeForm extends ImmutablePureComponent {
                 <PollButtonContainer />
                 <SpoilerButtonContainer />
                 <EmojiPickerDropdown onPickEmoji={this.handleEmojiPick} />
-                <CharacterCounter max={maxChars} text={this.getFulltextForCharacterCounting()} />
               </div>
 
               <div className='compose-form__submit'>
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index b634d78d53..92c51ff126 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -560,6 +560,10 @@ body > [data-popper-placement] {
       transition: none;
       border-color: $ui-highlight-color;
     }
+
+    .character-counter {
+      margin-inline-end: 0.5rem;
+    }
   }
 
   &__warning {