From 60a4d09f1a7343ff6cbd1417879a7125d1b74ff1 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Mon, 15 Jan 2024 10:59:24 +0200
Subject: [PATCH] UX: Chat composer dropdown styling mobile (#25244)

---
 .../components/chat-composer-dropdown.gjs      |  1 +
 .../mobile/chat-composer-dropdown.scss         | 18 ++++++++++++++++++
 .../chat/assets/stylesheets/mobile/index.scss  |  1 +
 3 files changed, 20 insertions(+)
 create mode 100644 plugins/chat/assets/stylesheets/mobile/chat-composer-dropdown.scss

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.gjs
index 57f9426e24c..ac3e6c4597c 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-composer-dropdown.gjs
@@ -26,6 +26,7 @@ export default class ChatComposerDropdown extends Component {
         @disabled={{@isDisabled}}
         @arrow={{true}}
         @placements={{array "top" "bottom"}}
+        @identifier="chat-composer-dropdown__menu"
         ...attributes
         as |menu|
       >
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-composer-dropdown.scss b/plugins/chat/assets/stylesheets/mobile/chat-composer-dropdown.scss
new file mode 100644
index 00000000000..c41497911b9
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/mobile/chat-composer-dropdown.scss
@@ -0,0 +1,18 @@
+[data-content][data-identifier="chat-composer-dropdown__menu"] {
+  width: calc(100% - 2rem);
+  max-width: unset;
+
+  .fk-d-menu__inner-content {
+    width: 100%;
+  }
+
+  .chat-composer-dropdown {
+    &__list {
+      width: 100%;
+    }
+    &__action-btn {
+      padding-block: 0.75rem;
+      gap: 0.5rem;
+    }
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/mobile/index.scss b/plugins/chat/assets/stylesheets/mobile/index.scss
index 212dd415770..2dc3c3ed1b2 100644
--- a/plugins/chat/assets/stylesheets/mobile/index.scss
+++ b/plugins/chat/assets/stylesheets/mobile/index.scss
@@ -1,6 +1,7 @@
 @import "base-mobile";
 @import "chat-channel";
 @import "chat-composer";
+@import "chat-composer-dropdown";
 @import "chat-index";
 @import "chat-message-actions";
 @import "chat-message";