fix: chat page UI problems (#261):

mqnguyen5 commented 2 years ago

Related issue

Fixes #261

Type of Change

[ ] Feat: Change which adds functionality/new feature
[x] Fix: Change which fixes an issue
[ ] Refactor: Change which improves the structure of the code
[ ] Docs: Change which improves documentation

Description

Removed unnecessary tailwind classes
Adjusted the height of the chat window to take more spaces on the screen and be more responsive
Changed the layout from flex to grid, with ChartPartner taking 1/3 and ChatWindow taking 2/3
Added extra padding between suggested lines section and chat input
Moved suggested lines from ChatMessageList to ChatInput
Added more Tailwind utility classes to help ChatPartner images resize properly on smaller screen size
Recalibrated the height of ChatMessageList based on certain screen sizes and conditions

Screenshot

Testing

Has this pull request been tested?

Yes

Please describe shortly how you tested it:

Chrome/Firefox Dev Tools

Note

The title of your PR should follow this format: [Type](area): Title

Despite all the screenshots, I'm still uncertain of whether it would look good on larger screens since I don't have a monitor to do more exact testing. I have tried to replicate most screen sizes to the best of my abilities using Chrome/Firefox Dev Tools, but there might be some edge cases, so if you spot any, please let me know.

Additionally, while I mentioned that the fix will make the page "more responsive", it doesn't mean that the page is 100% responsive on mobile, since the layout for mobile is different compare to other screens. For now, I'd say that the page should look okay on tablet-size screens and above.

vercel[bot] commented 2 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/tuanthanh2067/seeksi/6aoJyzpCus8UW6m2BmUUFzXT3Qep
✅ Preview: https://seeksi-git-fix-261-chat-page-ui-bug-tuanthanh2067.vercel.app

mqnguyen5 commented 2 years ago

Please also note that this is just the first version of the PR. I'm requesting reviews in both the front-end and back-end team to ensure that the fixes completely addresses the problems that we have.

mqnguyen5 commented 2 years ago

I have added some changes which would resolve most of your concerns. However, I wasn't able to figure out the problem regarding the arrows in the carousel. At the moment, I think the site should look okay on tablet-size screen and above, but for smaller screen sizes, we need to find a different approach. @tuanthanh2067 and @minhhang107 please have a look at the new changes for the time being, I'll try my best to figure out how we can resize/move the carousel/slider arrows to give more space for the suggested lines

minhhang107 commented 2 years ago

great changes! for the arrow, you can try to remove line 9 and 15 in ChatSuggestLines.css

btw, is there a way to only show this scrollbar when the partners overflow the space? Right now I can see it even tho I only have 2 matches

mqnguyen5 commented 2 years ago

It might be some bugs when I tried to configure the scroll bar. I'll look into it

mqnguyen5 commented 2 years ago

I have remove the code inside ChatSuggestedLines.css. I have tested and see that the arrows are aligned better in the chat window now:

As for the scroll problem, I don't see the scrollbar on my screen, which is kinda strange:

mqnguyen5 commented 2 years ago

I'll have a look at that.

tuanthanh2067 / seeksi