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

Co-authored-by: Manan Sadana <manancodes.dev@gmail.com>
matrix-org · Jan 18, 2024 · 43b607f · 43b607f
1 parent 9e16381
commit 43b607f
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git 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
@@ -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[] = [];