From 6b07af89da31dd502ce8416bc4eb7a9d44d912ec Mon Sep 17 00:00:00 2001
From: Natalie Tay <natalie.tay@discourse.org>
Date: Wed, 26 Mar 2025 02:21:36 +0800
Subject: [PATCH] UX: Better alignment and gaps for marked solved by (#346)

---
 .../initializers/extend-for-solved-button.js  | 14 +++++----
 assets/stylesheets/solutions.scss             | 30 +++++++++----------
 2 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/assets/javascripts/discourse/initializers/extend-for-solved-button.js b/assets/javascripts/discourse/initializers/extend-for-solved-button.js
index bb5eead..c803d01 100644
--- a/assets/javascripts/discourse/initializers/extend-for-solved-button.js
+++ b/assets/javascripts/discourse/initializers/extend-for-solved-button.js
@@ -42,12 +42,14 @@ function initializeWithApi(api) {
           const solvedQuote = `
             <aside class='quote accepted-answer' data-post="${topic.get("accepted_answer").post_number}" data-topic="${topic.id}">
               <div class='title ${hasExcerpt ? "" : "title-only"}'>
-                <div class="accepted-answer--solver">
-                  ${topic.solvedByHtml}
-                <\/div>
-                <div class="accepted-answer--accepter">
-                  ${topic.accepterHtml}
-                <\/div>
+                <div class="accepted-answer--solver-accepter">
+                  <div class="accepted-answer--solver">
+                    ${topic.solvedByHtml}
+                  <\/div>
+                  <div class="accepted-answer--accepter">
+                    ${topic.accepterHtml}
+                  <\/div>
+                </div>
                 <div class="quote-controls"><\/div>
               </div>
               ${excerpt}
diff --git a/assets/stylesheets/solutions.scss b/assets/stylesheets/solutions.scss
index fba5370..107ad07 100644
--- a/assets/stylesheets/solutions.scss
+++ b/assets/stylesheets/solutions.scss
@@ -65,11 +65,16 @@ $solved-color: green;
 aside.quote.accepted-answer {
   .title {
     display: flex;
-    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: flex-start;
+  }
 
-    &.title-only {
-      padding: 12px;
-    }
+  .accepted-answer--solver-accepter {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1;
+    min-width: 0;
+    gap: 0.25em;
   }
 
   .accepted-answer--solver {
@@ -78,19 +83,14 @@ aside.quote.accepted-answer {
 
   .accepted-answer--accepter {
     font-size: var(--font-down-1);
-    margin-left: auto;
+    width: 100%;
+    flex-basis: auto;
     margin-top: auto;
-  }
+    margin-bottom: auto;
+    margin-right: 0.25em;
 
-  @media screen and (max-width: 768px) {
-    .accepted-answer--accepter {
-      width: 100%;
-      margin-top: 0.25em;
-      order: 3;
-    }
-
-    .quote-controls {
-      order: 2;
+    @media (min-width: 480px) {
+      width: auto;
     }
   }
 }