From ad656d697d8fca1ea06558a921b985eec3f08794 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=83=87=E3=83=B4=E3=81=81=E3=82=93=E3=81=99?=
 <sdevanshu90@yahoo.com>
Date: Mon, 11 Sep 2023 23:08:43 +0530
Subject: [PATCH] add a gap

---
 .changeset/young-trains-glow.md                              | 5 +++++
 .../client/components/message/toolbox/MessageActionMenu.tsx  | 1 +
 .../MessageBoxActionsToolbar/ActionsToolbarDropdown.tsx      | 2 ++
 3 files changed, 8 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 && <OptionDivider />}
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..c55c0392bc95 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,8 @@ const ActionsToolbarDropdown = ({ isRecording, rid, tmid, actions, ...props }: A
 											chat: chatContext,
 										})
 									}
+									icon={item.icon as ComponentProps<typeof Option>['icon']}
+									gap={!item.icon}
 								>
 									{item.icon && <OptionIcon name={item.icon as ComponentProps<typeof OptionIcon>['name']} />}
 									<OptionContent>{item.name}</OptionContent>