[$250] Hybrid Android - Emoji picker for status page overlap with save button

[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: v9.0.51-1 Reproducible in staging?: Y Reproducible in production?: Y If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y Email or phone of affected tester (no customers): testpayment935+468@gmail.com Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to Expensify hybrid android app
2. Go to setting - profile - status
3. Click drop down button to choose emoji

Expected Result:

Emoji picker pop up without any overlap

Actual Result:

Emoji picker overlap with save button when the first status was empty

Workaround:

Unknown

Platforms:

• [x] Android: Standalone
• [x] Android: HybridApp
• [ ] Android: mWeb Chrome
• [ ] iOS: Standalone
• [ ] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [ ] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/b9478a6e-672a-478f-bb31-3477ca40de50

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021848448347625250199
• Upwork Job ID: 1848448347625250199
• Last Price Increase: 2024-10-21

Issue Owner

Current Issue Owner: @ntdiary

[melvin-bot[bot]]

Triggered auto assignment to @anmurali (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.

[IuliiaHerets]

I marked the issue as a deploy because this issue is not repro on Hybrid prod app

[IuliiaHerets]

Issue reproducible on both stg and prod Android App

[melvin-bot[bot]]

Triggered auto assignment to @yuwenmemon (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[github-actions[bot]]

:wave: Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[melvin-bot[bot]]

💬 A slack conversation has been started in #expensify-open-source

[yuwenmemon]

Since this is reproducible on production as well, I'm removing the deploy blocker and taking this external.

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~021848448347625250199

[melvin-bot[bot]]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @ntdiary (External)

[photoday0914]

Implement a mechanism to detect the available screen space when the emoji picker is activated. This could involve calculating the distance from the bottom of the screen to the save button and positioning the emoji picker above or below it, depending on the available space.

[melvin-bot[bot]]

📣 @photoday0914! 📣 Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork. Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details. Format:

   Contributor details
   Your Expensify account email: <REPLACE EMAIL HERE>
   Upwork Profile Link: <REPLACE LINK HERE>

[photoday0914]

Contributor details Your Expensify account email: nikoladev86@gmail.com Upwork Profile Link: https://www.upwork.com/freelancers/nikolad54

Implement a mechanism to detect the available screen space when the emoji picker is activated. This could involve calculating the distance from the bottom of the screen to the save button and positioning the emoji picker above or below it, depending on the available space. The calculation should be based on screen size. It may use function below.

export const vhToPx = (value, isNum) => {
  var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0],
    y = w.innerHeight || e.clientHeight || g.clientHeight

  var result = (y * value) / 100
  if (isNum) {
    return result
  } else {
    return result + 'px'
  }
}

export const responsiveDimension = val => {
  return IsMobile
    ? window.innerWidth / window.innerHeight <= 0.68
      ? mobileScale(val)
      : vhToPx(val)
    : vhToPx(val)
}

[melvin-bot[bot]]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[ntdiary]

Hi, @photoday0914, if you'd like to post a proposal, please read through our contributor guidelines, ensure you can test it on all platforms, and then update your proposal according to the proposal template. :)