From 43b607f71572bd3778605d53557073d38d738dba Mon Sep 17 00:00:00 2001
From: ElementRobot <releases@riot.im>
Date: Thu, 18 Jan 2024 18:26:27 +0100
Subject: [PATCH] [Backport staging] Fixed shield alignment on message Input
 (#12155)

Co-authored-by: Manan Sadana <manancodes.dev@gmail.com>
---
 res/css/views/rooms/_MessageComposer.pcss      | 4 +++-
 src/components/views/rooms/MessageComposer.tsx | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_MessageComposer.pcss b/res/css/views/rooms/_MessageComposer.pcss
index 56a7da7ec66..b6e97fac391 100644
--- a/res/css/views/rooms/_MessageComposer.pcss
+++ b/res/css/views/rooms/_MessageComposer.pcss
@@ -79,7 +79,9 @@ limitations under the License.
 .mx_MessageComposer_composecontrols {
     width: 100%;
 }
-
+.mx_MessageComposer_e2eIconWrapper {
+    height: 12px; /* Match the height of the E2E icon for alignment */
+}
 .mx_MessageComposer_e2eIcon.mx_E2EIcon {
     position: absolute;
     left: 20px;
diff --git a/src/components/views/rooms/MessageComposer.tsx b/src/components/views/rooms/MessageComposer.tsx
index 53e05e69a17..f9aae433feb 100644
--- a/src/components/views/rooms/MessageComposer.tsx
+++ b/src/components/views/rooms/MessageComposer.tsx
@@ -475,7 +475,9 @@ export class MessageComposer extends React.Component<IProps, IState> {
     public render(): React.ReactNode {
         const hasE2EIcon = Boolean(!this.state.isWysiwygLabEnabled && this.props.e2eStatus);
         const e2eIcon = hasE2EIcon && (
-            <E2EIcon key="e2eIcon" status={this.props.e2eStatus!} className="mx_MessageComposer_e2eIcon" />
+            <div className="mx_MessageComposer_e2eIconWrapper">
+                <E2EIcon key="e2eIcon" status={this.props.e2eStatus!} className="mx_MessageComposer_e2eIcon" />
+            </div>
         );
 
         const controls: ReactNode[] = [];