From 1000b9b317f35b0bff4c1981e7a7c52f9e53fe6c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=87=E3=83=AF=E3=83=B3=E3=82=B7=E3=83=A5?=
<61188295+Dnouv@users.noreply.github.com>
Date: Tue, 12 Sep 2023 20:27:07 +0530
Subject: [PATCH] fix: apps name misalignment in case of no icons (#30356)
---
.changeset/young-trains-glow.md | 5 +++++
.../client/components/message/toolbox/MessageActionMenu.tsx | 1 +
.../MessageBoxActionsToolbar/ActionsToolbarDropdown.tsx | 1 +
3 files changed, 7 insertions(+)
create mode 100644 .changeset/young-trains-glow.md
diff --git a/.changeset/young-trains-glow.md b/.changeset/young-trains-glow.md
new file mode 100644
index 000000000000..77f50812143f
--- /dev/null
+++ b/.changeset/young-trains-glow.md
@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Fixed the issue of apps icon uneven alignment in case of missing icons inside message composer toolbar & message toolbar menu.
diff --git a/apps/meteor/client/components/message/toolbox/MessageActionMenu.tsx b/apps/meteor/client/components/message/toolbox/MessageActionMenu.tsx
index 4c5d442652f2..54a320ebf3d7 100644
--- a/apps/meteor/client/components/message/toolbox/MessageActionMenu.tsx
+++ b/apps/meteor/client/components/message/toolbox/MessageActionMenu.tsx
@@ -101,6 +101,7 @@ const MessageActionMenu = ({ options, onChangeMenuVisibility, ...props }: Messag
data-qa-type='message-action'
data-qa-id={option.id}
role={option.role ? option.role : 'button'}
+ gap={!option.icon && option.type === 'apps'}
/>
))}
{index !== arr.length - 1 && }
diff --git a/apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/ActionsToolbarDropdown.tsx b/apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/ActionsToolbarDropdown.tsx
index 021f6518021a..5066ecb192e1 100644
--- a/apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/ActionsToolbarDropdown.tsx
+++ b/apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/ActionsToolbarDropdown.tsx
@@ -93,6 +93,7 @@ const ActionsToolbarDropdown = ({ isRecording, rid, tmid, actions, ...props }: A
chat: chatContext,
})
}
+ gap={!item.icon}
>
{item.icon && ['name']} />}
{item.name}