search

okTurtles / group-income

A decentralized and private (end-to-end encrypted) financial safety net for you and your friends.
https://groupincome.org
GNU Affero General Public License v3.0
331 stars 44 forks source link

#2337 - Fix the overly tall chatroom height when a message is in edit mode #2355

Closed SebinSong closed 2 months ago

SebinSong commented 2 months ago

closes #2337

edit-scroll-issue

From my investigation there is an invisible element .c-send-mask that is used to adjust/calculate the height of <textarea /> element (that has .c-send-textarea css class) while the message is in edit mode. The cause of the issue was that this invisible .c-send-mask becomes way too tall if the message content is large.

So, made a fix for this.

cypress[bot] commented 2 months ago

group-income    Run #3159

Run Properties:  status check passed Passed #3159  •  git commit bbe8d1a2ac ℹ️: Merge 04f31d87d9442a319ba14ccf70fcd8efb7cd914e into e03e16bb8c81e8225495cf5b8e08...
Project group-income
Branch Review sebin/task/#2337-edit-message-ui-bug
Run status status check passed Passed #3159
Run duration 09m 19s
Commit git commit bbe8d1a2ac ℹ️: Merge 04f31d87d9442a319ba14ccf70fcd8efb7cd914e into e03e16bb8c81e8225495cf5b8e08...
Committer Sebin Song
View all properties for this run ↗︎
Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 0
Tests that did not run due to a developer annotating a test with .skip  Pending 10
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 111
View all changes introduced in this branch ↗︎
SebinSong commented 2 months ago

1.

First, I wasn't able to test this on Firefox Developer Edition in the responsive mode because it wouldn't let me edit the message. There was no way to "click" the message to bring up the edit menu. So that's Bug 1.

That's a bug in FF devtool rather than a bug of app itself. The touch behaviour in the emulators of other browsers work well (Brave desktop, Chrome). When that buggy touch behaviour happens in FF, I sometimes just turn this button off to check something. (Also, I feel Chrome has been the best tool when it comes to the mobile emulator)

2.

When clicking "Edit" the viewport jumped in an unnatural way that required re-scrolling in order to get to a comfortable place where to edit the message. See first screenshot below:

Investigated this too but, I think this is something that I could only observe in Brave mobile-browser. In Chrome Android and Samsung Internet browser on my phone, they all gets scrolled to a correct position.

[Samsung Internet]

[Chrome Android]

3.

The edit viewport itself was still kinda unnecessarily small.

Increased the max-height value from 9rem to 13.75rem. let me know if it needs to be taller.

SebinSong commented 2 months ago

@taoeffect as discussed via Slack, removed the side-padding in the edit mode, so the text-area element becomes wider.