Repository navigation
[$250] mWeb - Room - Mention members list overlaps Send button #49474
Description
Activity
- addedDailyKSv2KSv2BugSomething is broken. Auto assigns a BugZero manager.Something is broken. Auto assigns a BugZero manager.
on Sep 19, 2024 Triggered auto assignment to @johncschuster (
Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.@johncschuster FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors
Proposal
Please re-state the problem that we are trying to solve in this issue.
Room - Mention members list overlaps Send button
What is the root cause of that problem?
We display the mention suggestion popup based on cursor coordinate here
let bottomValue = windowHeight - (cursorCoordinates.y - scrollValue + y) - keyboardHeight; And the compose input has 8px paddingTop that makes the mention suggestion popup overlap with the compose input box

What changes do you think we should make in order to solve the problem?
add + 8 to the bottomValue to make it not overlap with the compose input
let bottomValue = windowHeight - (cursorCoordinates.y - scrollValue + y) - keyboardHeight + 8;Might need add here to if needed
What alternative solutions did you explore? (Optional)
Edited by proposal-police: This proposal was edited at 2024-09-19 16:22:54 UTC.
Proposal
Please re-state the problem that we are trying to solve in this issue.
Mention members list overlaps Send button
What is the root cause of that problem?
Nothing wrong with the bottomValue calculation. The RCA is here
App/src/components/AutoCompleteSuggestions/AutoCompleteSuggestionsPortal/index.tsx
Line 43 in 885d6f4
<View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom - getBottomSuggestionPadding()})}>{componentToRender}</View> We minus the bottom with
getBottomSuggestionPaddingIf we remove this function, the suggestion looks like
What changes do you think we should make in order to solve the problem?
We should update this value
Line 2 in 885d6f4
return 6; to
-
0 (the result image is above)
-
-6
- Keep the current value and update this line to
<View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom + getBottomSuggestionPadding()})}>{componentToRender}</View>same as what we did here
What alternative solutions did you explore? (Optional)
We can adjust padding value depends on design team
-
@johncschuster What do you think about my proposal?
@johncschuster Huh... This is 4 days overdue. Who can take care of this?
- addedExternalAdded to denote the issue can be worked on by a contributorAdded to denote the issue can be worked on by a contributor
on Sep 24, 2024 Job added to Upwork: https://www.upwork.com/jobs/~021838693306849868080
- changed the title
[-]mWeb - Room - Mention members list overlaps Send button[/-][+][$250] mWeb - Room - Mention members list overlaps Send button[/+]on Sep 24, 2024 - addedHelp WantedApply this label when an issue is open to proposals by contributorsApply this label when an issue is open to proposals by contributors
on Sep 24, 2024 18 remaining items
⚠️ Looks like this issue was linked to a Deploy Blocker hereIf you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.
If a regression has occurred and you are the assigned CM follow the instructions here.
If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.
Reacted by parasharrajatMy Bad, instead of issue I used PR link.
Reacted by Vivek Kumar@johncschuster @techievivek @parasharrajat I just came across this thread and seems like the overlap between the suggestion box and composer/send button is expected. The fixed bottom padding is to keep the distance between the suggestion box and the cursor not too far away.
I think we should just close the PR and proceed payments since it is expected. Wdyt?
Reacted by parasharrajatHmm, but I think we can fix the padding for this case, no?
Let me bump the design team in the above thread to confirm if we are OK with keeping it as it is.
Reacted by John SchusterComing from here https://expensify.slack.com/archives/C01GTK53T8Q/p1729178050894439?thread_ts=1728373839.980369&cid=C01GTK53T8Q, this is expected behaviour for now so let's close the PR and finish up the payment, thanks.
Reacted by John Schuster and Dominic TuI closed the PR.
Payment Summary:
Contributor: @dominictb paid $250 via Upwork - PAID 🎉
Contributor+: @parasharrajat due $250 via NewDot
Upwork job here!
Payment requested as per #49474 (comment)
$250 approved for @parasharrajat
Metadata
Metadata
Labels
Type
Projects
- StatusShow more project fieldsDone
If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Version Number: 9.0.38-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): gocemate+a2199@gmail.com
Issue reported by: Applause Internal Team
Action Performed:
Expected Result:
Mention members list should not overlaps the Send button
Actual Result:
Mention members list overlaps Send button
Workaround:
Unknown
Platforms:
Screenshots/Videos
View all open jobs on GitHub
Upwork Automation - Do Not Edit