[Hold for Payment] Manage cards button is not visible when viewport is ~840px

[isagoico]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Navigate to a workspace
2. Reduce to viewport to be ~840px

Expected Result:

Button should be completely visible.

Actual Result:

Button is cropped and not completely visible.

Workaround:

No need, visual issue.

Platform:

Where is this issue occurring?

• Web
• mWeb (tablets or iPads maybe?)

Version Number: 1.0.85-0

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Expensify/Expensify Issue URL:

View all open jobs on Upwork

---

From @vitHoracek https://expensify.slack.com/archives/C01GTK53T8Q/p1628855161330000

With the added inset for the workspace modal it seems we will need to update the styles for Manage cards box, the text and button gets out of the blue container when the viewport is ~840px. This is on current main .

[MelvinBot]

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

[kakajann]

Proposal

840px is actually a tablet size. I tried to fix the issue, but it's kind of impossible with the current structure.

So, the best way to fix this is to create a condition to detect tablet sizes.

1. create a new variable in src/styles/variables.js.

tabletResponsiveWidthBreakpoint: 1024

2. modify src/components/withWindowDimensions.js

const isMediumScreenWidth = initialDimensions.width >= variables.mobileResponsiveWidthBreakpoint
    && initialDimensions.width <= variables.tabletResponsiveWidthBreakpoint;

3. Finally pass this style isMediumScreenWidth && styles.w100 to the card content
   

   App/src/pages/workspace/WorkspaceCardPage.js

   Lines 141 to 148 in 8b10c1c

   	<View
   	style={[
   	styles.flexGrow1,
   	styles.justifyContentEnd,
   	styles.alignItemsStart,
   	!isSmallScreenWidth && styles.w50,
   	]}
   	>

[kakajann]

Result

[mananjadhav]

@kakajann I had similar findings and we were tracking this issue here #4421

The current structure doesn't factor in any Tablet device dimensions.

[MelvinBot]

Triggered auto assignment to @SofiedeVreese (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[SofiedeVreese]

@shawnborton would love your thoughts here, given the similarities to #4421 and you mentioned we don't plan on changing the breakpoint?

[kakajann]

No need to change the breakpoints in my opinion. Just add new breakpoint to make some components responsive for tablet sizes. (i.e between 800 and 1024 pixels)

It will help us to fix current issue and for future use.

[mananjadhav]

I agree with @kakajann. We should be adding a new breakpoint for tablet sizes and probably rethink on certain pages.

[shawnborton]

I think that makes sense to me, curious if anyone else from @Expensify/design agrees. To summarize, we basically have a weird set of screen widths between like 800px-1000px wide where this Expensify Card advertorial breaks down. It sounds like the actual design of the advertorial for mobile devices would look better in these cases.

[megankelso]

sorry for the confusion, but is this the proposal? essentially having the cards layered behind the text?

I know these are different sizes, but I noticed the cards are changing size and position. Curious if there's a way to keep them more consistent with the screen below?

[SofiedeVreese]

@megankelso if from a Design point of view you agree this is something we want to fix, then I'll push it to Upwork and we can gather more proposals and see if there are other ways to fix the issue!

I just wanted to make sure we all agree this is an issue before pushing it to Upwork.

[megankelso]

oh I'm sorry for the misunderstanding. yes, I think it is worth fixing!

[SofiedeVreese]

@megankelso no stress- it was a little vague in the thread so sorry for causing confusion!

Ok pushing to Upwork! https://www.upwork.com/jobs/~0104471d011b7f47f4

@kakajann please see @megankelso 's comment above, is there a way to keep things more consistent with the screenshot in her comment?

[MelvinBot]

Triggered auto assignment to @timszot (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[mamdouhsobhy]

must resize views and user constrain to update the place of button

[kakajann]

@SofiedeVreese, @megankelso Yes, I can keep it consistent, once I add a new viewport for tablets.

[SofiedeVreese]

@timszot would love your 2c on the above, thanks!

[timszot]

@kakajann I like that proposal and seems like design likes it too!

@SofiedeVreese let's get them hired!

[SofiedeVreese]

Hey @kakajann Can you submit your proposal via Upwork so I can hire you through Upwork? Thanks!

[kakajann]

Hi, just submitted

[kakajann]

Can anybody assign me? It make it easier to sort the issues that I'm working on

[SofiedeVreese]

Hired & will assign you now @kakajann

[timszot]

@SofiedeVreese This is merged, but not deployed yet.

[SofiedeVreese]

Looking at this comment, looks like it's deployed now! Holding for payment on 6 September.

Edit: time zones confuse me, should be September 8th per this comment.

[SofiedeVreese]

This is paid out now @kakajann ! Thanks for your work on this!

Contributor paid, the contract has been completed, and the Upwork post has been closed.