Feature request: Make comment edit box same size as comment

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Go to app
2. Open any chat
3. Try to edit different by size comments

Expected Result:

When you edit a comment, nothing jumps

Actual Result:

When editing a comment, the UI jumps all over because the size of the edit box is a different size than the size of the comment itself. I think it would be best if they were the same size, such that when you edit a comment, nothing jumps. There seems to be plenty of padding available to enable this.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.23-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Recording.369.mp4

Expensify/Expensify Issue URL:
Issue reported by: @quinthar
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1640334666094300

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @sonialiap (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[MelvinBot]

Triggered auto assignment to @robertjchen (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[robertjchen]

To clarify, is this "jumping" referring to the fact that the text is moved up due to the insertion of the Cancel and Save changes buttons at the bottom of the block being edited?

Or, is this referring to the fact that the "visual" length of the text block changes within the edit box?

In the former case, one trick I've seen other chat clients do is to hide the name/date row altogether in edit mode. This has the effect of not having the previous chat messages above the one being edited "jump up" after inserting the Cancel and Save changes buttons below the message being edited. Something like this:

vs. normal edit mode (the messages above this one jump up due to the new buttons appearing in edit mode)

In the latter case, I think we would simply widen the text box to compensate? 🤔