Skip to content

[$250] mWeb - Room - Mention members list overlaps Send button #49474

Description

@IuliiaHerets

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:

  1. Create a room
  2. Type "@" into chat compose
  3. Verify member list opens

Expected Result:

Mention members list should not overlaps the Send button

Actual Result:

Mention members list overlaps Send button

Workaround:

Unknown

Platforms:

  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop

Screenshots/Videos

Bug6608624_1726736525054!mweb

View all open jobs on GitHub

Upwork Automation - Do Not Edit
  • Upwork Job URL: https://www.upwork.com/jobs/~021838693306849868080
  • Upwork Job ID: 1838693306849868080
  • Last Price Increase: 2024-09-24
  • Automatic offers:
    • dominictb | Contributor | 104208005

Activity

  1. added
    BugSomething is broken. Auto assigns a BugZero manager.
    on Sep 19, 2024
  2. melvin-bot commented on Sep 19, 2024

    @melvin-bot

    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.

  3. IuliiaHerets commented on Sep 19, 2024

    @IuliiaHerets
    Author

    @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

  4. nyomanjyotisa commented on Sep 19, 2024

    @nyomanjyotisa
    Member

    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
    image

    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)

  5. dominictb commented on Sep 19, 2024

    @dominictb
    Contributor

    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

    <View style={StyleUtils.getBaseAutoCompleteSuggestionContainerStyle({left, width, bottom: bottom - getBottomSuggestionPadding()})}>{componentToRender}</View>

    We minus the bottom with getBottomSuggestionPadding

    If we remove this function, the suggestion looks like

    Screenshot 2024-09-19 at 23 12 41

    What changes do you think we should make in order to solve the problem?

    We should update this value

    to

    1. 0 (the result image is above)

    2. -6

    Screenshot 2024-09-19 at 23 14 04
    1. 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

  6. dominictb commented on Sep 24, 2024

    @dominictb
    Contributor

    @johncschuster What do you think about my proposal?

  7. melvin-bot commented on Sep 24, 2024

    @melvin-bot

    @johncschuster Huh... This is 4 days overdue. Who can take care of this?

  8. added
    ExternalAdded to denote the issue can be worked on by a contributor
    on Sep 24, 2024
  9. melvin-bot commented on Sep 24, 2024

    @melvin-bot
  10. changed the title [-]mWeb - Room - Mention members list overlaps Send button[/-] [+][$250] mWeb - Room - Mention members list overlaps Send button[/+] on Sep 24, 2024
  11. added
    Help WantedApply this label when an issue is open to proposals by contributors
    on Sep 24, 2024
  12. 18 remaining items

  13. melvin-bot commented on Oct 8, 2024

    @melvin-bot

    ⚠️ Looks like this issue was linked to a Deploy Blocker here

    If 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.

  14. BhuvaneshPatil commented on Oct 8, 2024

    @BhuvaneshPatil
    Contributor

    My Bad, instead of issue I used PR link.

  15. dominictb commented on Oct 16, 2024

    @dominictb
    Contributor

    @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?

  16. techievivek commented on Oct 17, 2024

    @techievivek
    Contributor

    Hmm, but I think we can fix the padding for this case, no?

  17. techievivek commented on Oct 17, 2024

    @techievivek
    Contributor

    Let me bump the design team in the above thread to confirm if we are OK with keeping it as it is.

  18. techievivek commented on Oct 21, 2024

    @techievivek
    Contributor

    Coming 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.

  19. dominictb commented on Oct 22, 2024

    @dominictb
    Contributor

    I closed the PR.

  20. johncschuster commented on Oct 22, 2024

    @johncschuster
    Contributor

    Payment Summary:

    Contributor: @dominictb paid $250 via Upwork - PAID 🎉

    Contributor+: @parasharrajat due $250 via NewDot

    Upwork job here!

  21. parasharrajat commented on Dec 12, 2024

    @parasharrajat
    Member

    Payment requested as per #49474 (comment)

  22. JmillsExpensify commented on Dec 16, 2024

    @JmillsExpensify
    Contributor

    $250 approved for @parasharrajat

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

BugSomething is broken. Auto assigns a BugZero manager.ExternalAdded to denote the issue can be worked on by a contributorReviewingHas a PR in reviewWeeklyKSv2

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions