Desktop app layout broken following responsive layout tweaks, also broken on smaller devices

[devklick]

PR #14 introduced responsive layout for the game, but I clearly didnt test enough. As a result, the layout is borked on smaller screens and in the desktop apps.

Linux app:

Github pages:

[devklick]

Part of the issue is the menu icon being a fixed size. This prevents the first grid row from shrinking when the others shrink. With this removed, the two card rows are at least the same size.

[devklick]

And I think the issue with the overlapping buttons is just a result of bad layout.

The main table is made up of 3 equal rows;

• dealer cards
• player cards
• info hud
  And on smaller screens, there simply isnt enough space to display the stats table and the buttons in the bottom grid row.

Maybe playing around with the layout in the info hud would be enough; make the table slightly smaller, less of a gap above the table (which is reserved for text that gets displayed when the game results), make the buttons smaller etc.

Otherwise, maybe rather than the table being split into 3 equal rows, more space is needed in the info hud.

[github-actions]

🎉 This issue has been resolved in version 0.3.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[devklick]

Fixed in desktop and web.

• Menu button now shrinks based on the top bar height
• Hud text shrinks for windows smaller than a certain pixel hight
• Buttons become semi-transparent (revert to normal on hover and click) when the window gets smaller than a certain pixel height
• Min width and min height applied