Microphone icon misaligned on mobile devices

[paulchen]

Description:

Apparently, in Rocket.Chat 5.2.0 the microphone icon for recording voice messages was moved around. If the screen width is smaller than a certain threshold, it now seems to be misaligned.

Steps to reproduce:

On a mobile device:

1. Open Rocket.Chat on a mobile device.
2. Look at the input area for composing messages.

In a desktop browser:

1. Open Rocket.Chat.
2. Enable the "Device Toolbar" in the "DevTools" (Chromium-based browsers) or "Responsive Design Mode" in the "Developer Tools" (Firefox).
3. Reduce the width to less than 500px.
4. Look at the input area for composing messages.

Expected behavior:

The microphone icon does not get into the way of the textarea for composing messages.

Actual behavior:

The microphone icon gets into the way of the textarea for composing messages.

Desktop Chromium:

Chrome on Android:

The input field shows the input prompt "Nachricht" ("Message") to denote where you should tap in order to set the focus to it. As the input prompt is very close to the microphone icon, it is very easy to accidentially hit the microphone icon when you actually want to put the focus to the input field.

Server Setup Information:

• Version of Rocket.Chat Server: 5.2.0
• Operating System: Debian GNU/Linux 11.5
• Deployment Method: Docker
• Number of Running Instances: 1

Client Setup Information

• Desktop App or Browser Version:
  • Desktop:
    • Google Chrome Version 106.0.5249.119 (Offizieller Build) (64-Bit)
    • Chromium Version 106.0.5249.119 (Offizieller Build) Arch Linux (64-Bit)
    • Firefox 105.0.3 (64-bit)
  • Android:
    • Chrome 106.0.5249.118
    • Firefox 105.2.0 (Build #1024907747), 01fbfd637+
• Operating System:
  • Windows 10
  • Arch Linux
  • Android 11 (EMUI 12.0.0)

Additional context

This did not happen when using Rocket.Chat 5.1.4 as in that version, the microphone icon is in a completely different position:

Desktop Chromium:

Android Chrome:

[VasuDevrani]

Is anyone working on this issue?

[vedant-z]

Hey @paulchen May I try this ?

[paulchen]

Hey @paulchen May I try this ?

@vedant-z I'm not affiliated with Rocket.Chat, so I'm not in the position to make any decisions about who may work on which issue. I'm just running an instance of Rocket.Chat. In case I stumble upon something that doesn't look right, I create an issue on GitHub.

[mani-rsg]

HI @dudanogueira, since last message was 4 days ago and no one got assigned, I started to work on it and fixed it, I hope it's fine.