From 01a5e9df3659d64406b26ad910d8e95573267062 Mon Sep 17 00:00:00 2001
From: Colin Dean <colindean@users.noreply.github.com>
Date: Thu, 16 Jan 2025 11:30:08 -0500
Subject: [PATCH] Swap order of translation restoration and service credit
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swapping them moves the "show original" link to the same location where the "translate" link was, increasing the likelihood that a user need not move the pointer to restore the original— but not guaranteeing it.

Further reasoning: As a language learner, it's educational to follow accounts posting in the language I'm learning. I use the "translate" feature to confirm my understanding or teach me vocabulary I don't know. I will sometimes swap between the original and the translated version multiple times. This small UX tweak dramatically decreases the chance that one must move their pointer at all, whereas before, the "show original" link was _always_ on the other side of the box and required pointer movement.
---
 app/javascript/mastodon/components/status_content.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/javascript/mastodon/components/status_content.jsx b/app/javascript/mastodon/components/status_content.jsx
index aa8b060384..98291a96aa 100644
--- a/app/javascript/mastodon/components/status_content.jsx
+++ b/app/javascript/mastodon/components/status_content.jsx
@@ -43,13 +43,13 @@ class TranslateButton extends PureComponent {
 
       return (
         <div className='translate-button'>
-          <div className='translate-button__meta'>
-            <FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
-          </div>
-
           <button className='link-button' onClick={onClick}>
             <FormattedMessage id='status.show_original' defaultMessage='Show original' />
           </button>
+
+          <div className='translate-button__meta'>
+            <FormattedMessage id='status.translated_from_with' defaultMessage='Translated from {lang} using {provider}' values={{ lang: languageName, provider }} />
+          </div>
         </div>
       );
     }