From d09bf892c77bf9f2eb53d4b1ebf6a5e8ef325886 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 8 Jun 2020 23:58:53 -0400
Subject: [PATCH] UX: Improve layout of topic pin admin modal

---
 .../app/templates/modal/feature-topic.hbs     | 40 ++++++++++---------
 .../common/base/topic-admin-menu.scss         | 34 +++++++++++-----
 2 files changed, 46 insertions(+), 28 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/modal/feature-topic.hbs b/app/assets/javascripts/discourse/app/templates/modal/feature-topic.hbs
index 4dbbafd3844..fddb84f15a6 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/feature-topic.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/feature-topic.hbs
@@ -53,15 +53,17 @@
         {{else}}
           <p class="with-validation">
             {{html-safe pinMessage}}
-            {{d-icon "far-clock"}}
-            {{future-date-input
-              class="pin-until"
-              includeFarFuture=true
-              clearable=true
-              input=model.pinnedInCategoryUntil
-              onChangeInput=(action (mut model.pinnedInCategoryUntil))
-            }}
-            {{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
+            <span>
+              {{d-icon "far-clock"}}
+              {{future-date-input
+                class="pin-until"
+                includeFarFuture=true
+                clearable=true
+                input=model.pinnedInCategoryUntil
+                onChangeInput=(action (mut model.pinnedInCategoryUntil))
+              }}
+              {{popup-input-tip validation=pinInCategoryValidation shownAt=pinInCategoryTipShownAt}}
+            </span>
           </p>
         {{/if}}
         <p>
@@ -100,15 +102,17 @@
         {{else}}
           <p class="with-validation">
             {{i18n "topic.feature_topic.pin_globally"}}
-            {{d-icon "far-clock"}}
-            {{future-date-input
-              class="pin-until"
-              includeFarFuture=true
-              clearable=true
-              input=model.pinnedGloballyUntil
-              onChangeInput=(action (mut model.pinnedGloballyUntil))
-            }}
-            {{popup-input-tip validation=pinGloballyValidation shownAt=pinGloballyTipShownAt}}
+            <span>
+              {{d-icon "far-clock"}}
+              {{future-date-input
+                class="pin-until"
+                includeFarFuture=true
+                clearable=true
+                input=model.pinnedGloballyUntil
+                onChangeInput=(action (mut model.pinnedGloballyUntil))
+              }}
+              {{popup-input-tip validation=pinGloballyValidation shownAt=pinGloballyTipShownAt}}
+            </span>
           </p>
         {{/if}}
         <p>
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index 4a698c9c830..d96719d5ece 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -25,13 +25,14 @@
 }
 
 .modal-body.feature-topic {
-  max-height: 500px;
+  max-height: 70vh !important ;
+  padding: 0 1em;
   input.date-picker {
     margin: 0;
   }
   .feature-section {
     display: block;
-    padding: 1em 0;
+    padding: 1.25em 0;
     &:not(:last-of-type) {
       border-bottom: 1px solid $primary-low;
     }
@@ -46,10 +47,20 @@
       }
       p {
         margin: 10px 0 0;
+        max-width: 31em;
       }
     }
     .with-validation {
       position: relative;
+
+      > span {
+        display: flex;
+        align-items: flex-start;
+        > .d-icon {
+          padding-top: 0.75em;
+          margin-right: 0.5em;
+        }
+      }
     }
   }
 }
@@ -61,18 +72,16 @@
 }
 
 .desktop-view .feature-topic-modal {
-  .feature-topic {
-    overflow: visible;
-  }
-
-  .modal-inner-container {
-    min-width: 700px;
-  }
-
   .pin-until {
     position: relative;
     display: inline-block;
   }
+  .modal-inner-container {
+    overflow: visible;
+  }
+  .modal-footer {
+    background: $secondary;
+  }
 }
 
 .mobile-view .feature-topic .feature-section {
@@ -82,6 +91,11 @@
     max-width: 90%;
     margin: 0;
   }
+  .badge-wrapper {
+    white-space: nowrap;
+    overflow: hidden;
+    max-width: 19em;
+  }
 }
 
 // Select posts