[Bug]: `GameCardName` component in dialogs will sometimes overlap other elements

[itsalaidbacklife]

Bug Summary

The GameCardName component will sometimes overlap other text in dialogs instead of pushing them aside to make sufficient space

Detailed Description

See image below:

In this picture both the 9♦️ and 10♠️ are overlapping the other text. Instead, they should push the other text to create enough space for the cream-colored background on the GameCardName without overlapping the other text.

Current Behavior

The GameCardName background will overlap other text on smaller device sizes

Expected Behavior

The GameCardName does not overlap the text and both the text and the card names are legible

Steps to Reproduce

1. Enter a game
2. Play a royal
3. Have opponent play a 2 on your royal
4. Shrink your window size down so that the dialog text wraps
5. Observe the GameCardName component overlapping the other text