Fixed message box misalignment issue

[abirc8010]

Brief Title

1) Increased the chat body’s max-height from 600px to 100%.

2) Set the message box’s margin-bottom to 0 and margin-top to auto for better alignment at the bottom.

3) Updated the chat input box margin to "2rem 2rem 0.4rem 1.5rem" for improved spacing and layout.

4) Added media queries to adjust message font sizes for screen widths <= 900px , <= 600px, and <= 400px to maintain readability.

Acceptance Criteria fulfillment

• [ ] Task 1
• [ ] Task 2
• [ ] Task 3

Fixes #616

Video/Screenshots

Before:

before.webm

After:

after.webm

[CLAassistant]

All committers have signed the CLA.

[Spiral-Memory]

Hey @abirc8010

Thank you for your PR ! Please make a complete video showing that it works properly in all screen sizes, also highlight the changes you have done properly in PR description.

[abirc8010]

@Spiral-Memory Thanks for the feedback. Currently, the responsiveness is for screens with a width of 400px or more. Can I work on improving it for screens narrower than 400px as well?

[Spiral-Memory]

Once, make a video for all screen sizes, and let me have a look at how it behaves. Based on that, I'll suggest you to work on it further.

Please update your PR description and video !

[abirc8010]

I have updated my PR description and video

[Spiral-Memory]

Video looks good to me !

Regarding PR description, please add technical details on what you did as well ! It will be helpful for me to review as these are mostly css changes.

[abirc8010]

Thanks I'm glad to know that it looks good ! I've updated the PR description as well !

[abirc8010]

@Spiral-Memory do I need to make any further improvements in this PR ?

[Spiral-Memory]

Will review it, then I'll respond to it

[abirc8010]

@Spiral-Memory is there any update on this PR ?
I've resolved the merge conflicts.

[Spiral-Memory]

Hey @abirc8010,
Please attach a 'before' video as well, so it will be helpful for me to review. (Record your own video of the current develop branch and compare it with your changes.)

Also, the build check is failing. Could you please format your changes using Prettier?

[abirc8010]

@Spiral-Memory I’ve made the required changes

[Spiral-Memory]

Thank you so much for the contribution.

I need to verify this on multiple devices because, on my system, even before this PR, it looks the same as what is shown in the 'After' video 😢.

I'll let you know.

[Spiral-Memory]

@devanshkansagra

Could you please attach a before / after video for this PR as well recorded from your device.

Thanks..

[abirc8010]

I need to verify this on multiple devices because, on my system, even before this PR, it looks the same as what is shown in the 'After' video 😢.

Before this PR , the issue is arising when the length of the screen is increased

Screencast from 2024-09-29 17-10-33.webm

[Spiral-Memory]

Ohh, Okay Thanks for the clarification, so in normal settings, this is fine right ?

[devanshkansagra]

on my iphone

[Spiral-Memory]

on my iphone

This looks good except for the Quote messages.. anyway, I've opened an issue to make EmbeddedChat properly mobile responsive. It would be great if you could identify and address the various responsiveness issues, if you're interested. It's a large task, so collaborative work might be helpful!

@devanshkansagra @abirc8010 or anyone else who is interested.

[Spiral-Memory]

https://github.com/RocketChat/EmbeddedChat/issues/629

[abirc8010]

@Spiral-Memory Could I create a separate PR for the quote messages and mobile responsiveness? There are existing issues with quote message responsiveness that were present even before this PR, so those can also be addressed in that new PR.

[Spiral-Memory]

Keep the responsiveness issue as the central issue and raise PRs for small fixes quoting that issue, but significant changes that add real value are appreciated.

[abirc8010]

I've also modified the max height to 100% as suggested