Fixed message box misalignment issue #619
Conversation
|
|
|
Hey @abirc8010 Thank you for your PR ! |
|
@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? |
|
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 ! |
|
I have updated my PR description and video |
|
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. |
|
Thanks I'm glad to know that it looks good ! |
|
@Spiral-Memory do I need to make any further improvements in this PR ? |
|
Will review it, then I'll respond to it |
abirc8010
force-pushed
the
makeresponsive
branch
from
42238b5
to
6e6c3b1
Compare
|
@Spiral-Memory is there any update on this PR ? |
|
Hey @abirc8010, Also, the build check is failing. Could you please format your changes using Prettier? |
|
@Spiral-Memory I’ve made the required changes |
|
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. |
|
Could you please attach a before / after video for this PR as well recorded from your device. Thanks.. |
Before this PR , the issue is arising when the length of the screen is increased Screencast.from.2024-09-29.17-10-33.webm |
|
Ohh, Okay |
|
|
| @@ -9,7 +9,7 @@ export const getChatbodyStyles = () => { | |||
| overflow-x: hidden; | |||
| display: flex; | |||
| flex-direction: column-reverse; | |||
| max-height: 600px; | |||
| max-height: 900px; | |||
There was a problem hiding this comment.
So, even after this PR, when this particular element exceeds the limit, the behavior will still be the same, right?
Can’t we consider using percentages or relative units instead of fixed units?
Because even with this change, there doesn't seem to be any real benefit.
What’s your opinion on this?
There was a problem hiding this comment.
Ok , I am changing it to 100%
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 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. |
|
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. |
|
I've also modified the max height to 100% as suggested |
|
@abirc8010 Please resolve the conflicts |
abirc8010
force-pushed
the
makeresponsive
branch
from
78cecb8
to
afa6b81
Compare
Brief Title
Increased the chat body’s max-height from 600px to 100%.
Set the message box’s margin-bottom to 0 and margin-top to auto for better alignment at the
bottom.
Updated the chat input box margin to "2rem 2rem 0.4rem 1.5rem" for improved spacing and layout.
Added media queries to adjust message font sizes for screen widths <= 900px , <= 600px, and <=
400px to maintain readability.
Acceptance Criteria fulfillment
Fixes #616
Video/Screenshots
Before:
before.webm
After:
after.webm