FIX: Show tag chooser in composer for PM on mobile (#22241)

This was not displayed on mobile due to space constraints. With better
organization of the title, category and tags inputs, it can be
displayed.

app/assets/javascripts/discourse/app/components/composer-container.hbs

@@ -26,7 +26,12 @@
         role="form"
         aria-label={{I18n this.composer.saveLabel}}
         class="reply-area
-          {{if this.composer.canEditTags 'with-tags' 'without-tags'}}"
+          {{if this.composer.canEditTags 'with-tags' 'without-tags'}}
+          {{if
+            this.composer.model.showCategoryChooser
+            'with-category'
+            'without-category'
+          }}"
       >
         <span class="composer-open-plugin-outlet-container">
           <PluginOutlet

app/assets/javascripts/discourse/app/services/composer.js

@@ -237,10 +237,6 @@ export default class ComposerController extends Controller {
 
   @discourseComputed("model.canEditTitle", "model.creatingPrivateMessage")
   canEditTags(canEditTitle, creatingPrivateMessage) {
-    if (creatingPrivateMessage && this.site.mobileView) {
-      return false;
-    }
-
     const isPrivateMessage =
       creatingPrivateMessage || this.get("model.topic.isPrivateMessage");
 

app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js

@@ -963,10 +963,10 @@ acceptance(
       can_tag_topics: true,
     });
 
-    test("tags are not present on private messages - Mobile mode", async function (assert) {
+    test("tags are present on private messages - Mobile mode", async function (assert) {
       await visit("/u/eviltrout/messages");
       await click(".new-private-message");
-      assert.ok(!exists("#reply-control .mini-tag-chooser"));
+      assert.ok(exists("#reply-control .mini-tag-chooser"));
     });
   }
 );

app/assets/stylesheets/common/base/compose.scss

@@ -278,7 +278,7 @@ html.composer-open {
     }
   }
 
-  .with-tags {
+  .with-tags.with-category {
     .title-and-category {
       flex-wrap: wrap;
     }
@@ -319,7 +319,6 @@ html.composer-open {
 
   .mini-tag-chooser {
     flex-grow: 1;
-    max-width: calc(50% - 4px);
     margin: 0 0 8px 0px;
     z-index: z("composer", "dropdown");
     .select-kit-header {

app/assets/stylesheets/mobile/compose.scss

@@ -94,7 +94,7 @@
   }
 
   .category-input,
-  .with-tags .category-input {
+  .with-tags.with-category .category-input {
     margin-bottom: 6px;
     max-width: calc(50% - 3px);
   }
@@ -209,19 +209,6 @@
       margin: 0 0 6px 6px;
       max-width: calc(50% - 3px);
     }
-
-    .selected-name {
-      .name {
-        font-size: var(--font-down-1);
-        .badge-wrapper {
-          font-size: var(--font-0);
-        }
-      }
-    }
-
-    .formatted-selection {
-      font-size: var(--font-down-1);
-    }
   }
 
   .without-tags {