Fixed shield alignment on message Input

[manancodes]

Checklist

• Tests written for new code (and old code if feasible)
• Linter and other CI checks pass
• Sign-off given on the changes (see [CONTRIBUTING.md] (https://github.com/matrix-org/matrix-react-sdk/blob/develop/CONTRIBUTING.md))

Fixes element-hq/element-web#26851
Signed-off-by: Manan Sadana manancodes.dev@gmail.com

This was the behaviour before the fix:

And this is the behaviour after the fix:

Type: defect

---

Here's what your changelog entry will look like:

🐛 Bug Fixes

• Fixed shield alignment on message Input (#12149). Fixes Composer input field misaligned with shield element-hq/element-web#26851. Contributed by @manancodes.

[manancodes]

Converted to a draft because it needs some more work. The alignment is not right in rooms without encryption. And test screenshots need to be updated.

[manancodes]

I am trying to update the snapshots for the tests.

I am using this command:
yarn run test:playwright playwright/e2e/timeline/timeline.spec.ts --update-snapshots

It adds new screenshots with -darwin.png extension but does not update the existing -linux.png files. I'm not very familiar with Playwright. What an I doing wrong?

In the .gitignore file I see that only -linux.png files are allowed to be pushed. So I think it is expected from playwright to create different types of screenshots.

[dbkr]

Thanks for this PR, I've updated the branch. I think you asked in the Matrix room but for the record, the answer was that we supply a docker image for the purpose, so yarn test:playwright:screenshots timeline.spec.ts should work.

[manancodes]

Awesome. Thanks. I'll update the PR.

[andybalaam]

Awesome, thank you @manancodes !