[Bug]: Jacks cover up their target point cards on mobile devices in portrait orientation

[itsalaidbacklife]

Bug Summary

When players use mobile devices in portrait orientation, they can have difficulty seeing the point card underneath

Detailed Description

See image below:

The point card beneath the jacks is covered up by the jacks. This makes it difficult to assess the board state, and worse makes it so that you can't click the point card to target it.

Current Behavior

The point card is covered by the jacks.

Expected Behavior

The point card and the jacks are both visible

Steps to Reproduce

With the tests: Relevant spec: it('Player and Opponent plays Jacks on different cards') in tests/e2e/specs/in-game/basicMoves.spec.js

1. Boot the client and server with npm run start:dev
2. Add a call to cy.viewport('iphone-8') to the describe() block above the test, before cy.setupGameAsP0().
3. Add a .only() to the spec so it reads it.only('Player and Opponent plays Jacks on different cards')
4. Run the spec in gui mode by booting cypress in another shell with npm run e2e:gui and clicking the basicMoves.spec.js file

You'll see the game play out and jacks appear on both sides of the field. Use this test to ensure the point cards are still visible.

Manual testing We highly encourage contributors to use the tests to rapidly iterate as it cuts down time refreshing the page and re-creating a given scenario in-game, but you can manually replicate the issue by:

1. Signing in as two separate accounts in two separate browsers
2. Shrinking one of the browser windows to a portrait mobile size
3. Starting a game
4. Playing points as one player, then playing a jack on those points as the other

[Alexander-Bokedal]

Hey there!

I'll give this my best shot. A bit of a newbie, so no guarantees!

I'll let you know how it goes