[Backport staging] Fixed shield alignment on message Input (#12155)

Co-authored-by: Manan Sadana <[email protected]>

Author: RiotRobot

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;

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[] = [];