Futures mobile fixes

[koredefashokun]

Description

This PR fixes a number of reported issues with futures on mobile.

Related issue

N/A

Motivation and Context

Conclusion of mobile compatibility development (until new features are added).

How Has This Been Tested?

N/A

Screenshots (if appropriate):

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
kwenta	✅ Ready (Inspect)	Visit Preview	Sep 2, 2022 at 9:19PM (UTC)

[platschi]

Looks better now! A few comments:

• Top buttons on Markets (Price and Trades) shift layout when switching from either Account or Stats (see screen recording attached). Note Add Skew data in mobile market stats tab #1184 adds more data to the Stats, so maybe merge that one first to avoid fixing the layout shift twice.

• Price button should be moved into the first place and load on default

• When scrolling down on Dashboard and selecting a market (e.g. try with the last one in the list), page jumps to the middle of the market page, not to the top (as would be expected)

• On Dashboard, Futures Markets Stats, rename "Total Trades" to "24h Trades"

• On Markets, Position Card should be hidden if users don't have a position open (this is the case when wallet not connected, but with a connected wallet the empty Position Card is still visible)

• Still being discussed: Make Dashboard menu link clickable (link straight to Overview)

• Need to set up individual Markets page (similar to Desktop), as currently "Overview" and "Markets" links in navigation point to the same page (Dashboard). This will be tracked in a separate ticket. (#1187)

RPReplay_Final1658931098.MP4

[platschi]

• Left-align "Oracle/Entry" column data in Open Position table to avoid shifts with higher amounts (see Discord channel comments):

How it is

How it should be

[platschi]

Looks great now, much better with the buttons not jumping around! Re: markets not jumping to top, we'll create a separate ticket for this.

My two last comments:

1. Skew values >1M create additional rows which makes the Stats table border overlap with the buttons. see screenshot:

2. Open Position price box is now nicely aligned, however leverage values >=10.00x create an obsolete new line. Maybe expand the left column width a bit so it fits nicely. See screnshot:

[platschi]

Thanks, all changes work good now!

[platschi]

From @Marko-roy:

1. "Orders" Size amount on mobile: Remove asset name (should be the same as on desktop) to just show the Size value.
2. Column "Actions" not aligned with "Cancel"
3. "Orders" tab table Type not aligned on mobile, same with "Short" box, text should be centered and box padding aligned. See screenshot: