[$500] DEV: Logo Display Issue on Small Screens

[kavimuru]

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- Open the web app in development mode.
2- Access the app using a device or browser with a small screen size (mobile size).
3- Observe the logo display on the splash screen.

Expected Result:

The logo on the splash screen should be fully displayed, without any cropping or misalignment, regardless of the screen size.

Actual Result:

Only around 1/4 of the logo is visible on the splash screen, indicating that the logo is not being displayed correctly on small screens.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number:
Reproducible in staging?: dev
Reproducible in production?: dev
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-08-21.at.10.01.02.AM.mov

Expensify/Expensify Issue URL:
Issue reported by: @ahmdshrif
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1692601767190289

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01229788941fa6e972
• Upwork Job ID: 1699152564126756864
• Last Price Increase: 2023-09-12

[melvin-bot]

Triggered auto assignment to @tjferriss (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[kavimuru]

Proposal

by @ahmdshrif

Please re-state the problem that we are trying to solve in this issue.

The logo on the splash screen is not being displayed correctly on small screens. Only around 1/4 of the logo is visible, indicating that the logo is being cropped.

What is the root cause of that problem?

The root cause of the problem is that the SVG image of the logo does not have a viewBox attribute. The viewBox attribute defines the coordinate space of the SVG image. When you resize the image, the viewBox attribute is used to scale the image proportionally. Without a viewBox attribute, the image is simply cropped to fit the new size.

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

To fix the problem, we need to add a viewBox attribute to the SVG image. The viewBox attribute should be set to the same dimensions as the image. For example, if the image is 80 pixels wide and 80 pixels high, the viewBox attribute would be set to:

<svg viewBox="0 0 80 80">
  ...
</svg>

This will ensure that the image is resized proportionally when it is resized.

What alternative solutions did you explore? (Optional)

We could also use CSS to scale the image proportionally. However, this would be less efficient than using a viewBox attribute.

[c3024]

Please fetch latest main. It was fixed already.

[ahmdshrif]

@c3024 yes looks like you fixed it in this PR but I can also reproduce it in ad-hoc

Here is how to reproduce it:-

1. run npm run build-adhoc
2. run npx serve -s dist ( you can sikp the 2 steps and use this ad-hoc build https://26617.pr-testing.expensify.com/)
3. Access the app using a device or browser with a small screen size (mobile size).
4. Observe the logo display on the splash screen.

Screen.Recording.2023-09-03.at.11.25.15.PM.mov

and to fix that we will add viewBox="0 0 80 80" to new-expensify-adhoc.svg
We also can change their color to match the new color and will be
by change this style .st2{fill:#002e22} to .st2{fill:#03D47C}

Screen.Recording.2023-09-03.at.11.34.02.PM.mov

cc: @tjferriss

[melvin-bot]

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

[tjferriss]

I don't have a dev environment to test. I'm asking for clarification on whether we'd fix this.

[melvin-bot]

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

[melvin-bot]

Current assignee @tjferriss is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[tjferriss]

@abdulrahuman5196 can you reproduce this one on dev?

[melvin-bot]

@tjferriss, @abdulrahuman5196 Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@tjferriss, @abdulrahuman5196 Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[tjferriss]

@abdulrahuman5196 friendly bump... is this reproducible on dev?

[melvin-bot]

@tjferriss @abdulrahuman5196 this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[abdulrahuman5196]

Testing on dev now

[abdulrahuman5196]

@tjferriss I am not able to repro the issue in Dev as well as adhoc builds.

[ahmdshrif]

@abdulrahuman5196 can you share the ad-hoc build that you can't repro on it?
I can repro it in this adHoc build https://26617.pr-testing.expensify.com/

Screen.Recording.2023-09-15.at.11.25.48.PM.mov