UX: better accommodate PM composer with tags (#14778)

UX: better accommodate PM composer with tags (#14778)

diff --git a/app/assets/javascripts/discourse/app/templates/composer.hbs b/app/assets/javascripts/discourse/app/templates/composer.hbs
index 12b49f9..532ea5e 100644
--- a/app/assets/javascripts/discourse/app/templates/composer.hbs
+++ b/app/assets/javascripts/discourse/app/templates/composer.hbs
@@ -62,12 +62,12 @@
                     recipients=model.targetRecipients
                     hasGroups=model.hasTargetGroups
                     focusTarget=focusTarget
-                    class="users-input"
+                    class=(concat "users-input" (if showWarning " can-warn"))
                   }}
                   {{#if showWarning}}
                     <label class="add-warning">
                       {{input type="checkbox" checked=model.isWarning}}
-                      {{i18n "composer.add_warning"}}
+                      <span>{{i18n "composer.add_warning"}}</span>
                     </label>
                   {{/if}}
                 </div>
diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss
index 4a4613d..e61e090 100644
--- a/app/assets/stylesheets/desktop/compose.scss
+++ b/app/assets/stylesheets/desktop/compose.scss
@@ -11,18 +11,47 @@
     }
   }
 
-  #private-message-users {
-    width: 404px;
+  .select-kit.is-expanded {
+    z-index: z("composer", "dropdown") + 1;
   }
 
-  .item + #private-message-users {
-    width: unset;
-    min-width: 150px;
-    flex: 1 1 auto;
-  }
+  &.private-message {
+    .with-tags {
+      .title-and-category {
+        flex-wrap: nowrap; // force title and tags on same line for PMs
+        .mini-tag-chooser {
+          margin-bottom: 5px; // match title input margin
+          flex: 0 0 auto;
+          margin-left: 1%; // matches margin between category and tag input
+          width: 39%;
+        }
+      }
+    }
 
-  .select-kit.is-expanded {
-    z-index: z("composer", "dropdown") + 1;
+    #private-message-users,
+    .users-input {
+      width: 100%;
+      flex: 0 0 auto;
+      &.can-warn {
+        // space for warning, inverse of mini-tag-chooser width
+        width: 60%;
+      }
+    }
+
+    .add-warning {
+      flex: 1 1 auto;
+      overflow: hidden;
+      span {
+        // protects the space of the user input in case there's a very long translation
+        @include ellipsis;
+      }
+    }
+
+    &.show-preview {
+      .user-selector {
+        width: 50%;
+      }
+    }
   }
 }
 

GitHub sha: cd8822cb5056e6a1ee39016bb7527672a655d920

This commit appears in #14778 which was merged by awesomerobot.