From 7e470bf8ae47e15a682dedfdbb69a3579e194993 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Wed, 17 Mar 2021 22:42:52 -0400
Subject: [PATCH] UX: Improve topic footer alignment and layout (#12420)

---
 .../stylesheets/common/base/topic-post.scss     | 17 +++++++++++++++--
 app/assets/stylesheets/desktop/topic-post.scss  |  6 ++++++
 app/assets/stylesheets/mobile/topic-post.scss   | 12 +++++++++---
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index 36186c2ddd..cbf07b9ee3 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -1098,7 +1098,9 @@ a.mention-group {
     button {
       margin-right: 0.54em;
     }
-
+    > * {
+      margin-bottom: 0.5em; // all immediate children should have a bottom margin in case of wrapping
+    }
     .topic-admin-menu-button-container {
       display: inline-flex;
       > span {
@@ -1113,7 +1115,7 @@ a.mention-group {
 
   .pinned-button,
   .topic-notifications-button {
-    margin: 1em 0;
+    margin: 0.5em 0 1em;
 
     .reason {
       color: var(--primary-high);
@@ -1121,8 +1123,19 @@ a.mention-group {
       margin: 0;
       align-items: center;
 
+      .dropdown-select-box {
+        .select-kit-selected-name {
+          width: 100%;
+          overflow: hidden;
+        }
+        .name {
+          @include ellipsis;
+        }
+      }
+
       .text {
         margin-left: 0.5em;
+        line-height: $line-height-medium;
       }
     }
   }
diff --git a/app/assets/stylesheets/desktop/topic-post.scss b/app/assets/stylesheets/desktop/topic-post.scss
index 21be8b005d..e309532b90 100644
--- a/app/assets/stylesheets/desktop/topic-post.scss
+++ b/app/assets/stylesheets/desktop/topic-post.scss
@@ -433,6 +433,12 @@ pre.copy-codeblocks:hover .copy-cmd {
 #topic-footer-buttons {
   max-width: calc(690px + (11px * 2) + 45px);
 
+  @media screen and (max-width: 924px) {
+    .topic-footer-main-buttons {
+      margin-top: 1em; // some extra space for the docked progress bar
+    }
+  }
+
   .bookmark {
     .d-icon-bookmark.bookmarked {
       color: var(--tertiary);
diff --git a/app/assets/stylesheets/mobile/topic-post.scss b/app/assets/stylesheets/mobile/topic-post.scss
index e78c827a70..368f959c00 100644
--- a/app/assets/stylesheets/mobile/topic-post.scss
+++ b/app/assets/stylesheets/mobile/topic-post.scss
@@ -15,7 +15,7 @@
 }
 
 .post-stream {
-  padding-bottom: 30px;
+  padding-bottom: 3em;
 }
 
 span.badge-posts {
@@ -243,8 +243,7 @@ a.reply-to-tab {
   }
 
   .topic-footer-mobile-dropdown {
-    margin: 0 0.75em 0 0;
-    width: 160px;
+    margin-right: 0.5em;
     display: flex;
   }
 
@@ -256,6 +255,13 @@ a.reply-to-tab {
   .pinned-button {
     display: flex;
     align-items: center;
+
+    .reason {
+      align-items: flex-start;
+      .select-kit {
+        max-width: 40%;
+      }
+    }
     @include breakpoint(mobile-medium) {
       display: inline-block;
       .reason {