From 4bb4be958c5c2f301b9d80052472ef64da1805ab Mon Sep 17 00:00:00 2001
From: Bianca Nenciu <nbianca@users.noreply.github.com>
Date: Mon, 26 Jun 2023 20:12:32 +0300
Subject: [PATCH] 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/components/composer-container.hbs         |  7 ++++++-
 .../discourse/app/services/composer.js            |  4 ----
 .../acceptance/user-private-messages-test.js      |  4 ++--
 app/assets/stylesheets/common/base/compose.scss   |  3 +--
 app/assets/stylesheets/mobile/compose.scss        | 15 +--------------
 5 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/composer-container.hbs b/app/assets/javascripts/discourse/app/components/composer-container.hbs
index 20dc3fc5995..8e19f89aa30 100644
--- a/app/assets/javascripts/discourse/app/components/composer-container.hbs
+++ b/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
diff --git a/app/assets/javascripts/discourse/app/services/composer.js b/app/assets/javascripts/discourse/app/services/composer.js
index 014d9d1cd7c..b31dae7a4f1 100644
--- a/app/assets/javascripts/discourse/app/services/composer.js
+++ b/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");
 
diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js
index c0970b4d5f9..3fdd3aadf35 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js
+++ b/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"));
     });
   }
 );
diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss
index 68b1b33c99c..bc120e625d5 100644
--- a/app/assets/stylesheets/common/base/compose.scss
+++ b/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 {
diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss
index 8a2e73fb533..fde97dd9771 100644
--- a/app/assets/stylesheets/mobile/compose.scss
+++ b/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 {