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

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>

app/assets/stylesheets/desktop/compose.scss

@@ -11,19 +11,48 @@
     }
   }
 
-  #private-message-users {
-    width: 404px;
-  }
-
-  .item + #private-message-users {
-    width: unset;
-    min-width: 150px;
-    flex: 1 1 auto;
-  }
-
   .select-kit.is-expanded {
     z-index: z("composer", "dropdown") + 1;
   }
+
+  &.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%;
+        }
+      }
+    }
+
+    #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%;
+      }
+    }
+  }
 }
 
 .edit-title {