UI misalignments

[HarryMichal]

Hi, I just started exploring the codebase and one of the easiest (and most likely less important) tasks to seems to fix various misalignments of the UI. It is very visible in the lobby screen.

I highlighted some problems in a screenshot:

1. The title of the box
2. Name of a player is too close to the ready/not ready/loading button; it would be better if the button was aligned to the right
3. it's not centered
4. the box sizes of the labels and the actions are equal; labels don't need really big boxes
5. almost the same as 4.
6. the buttons are overlapping
7. it's not centered; this one is not really important

These things can be mostly fixed with some CSS or Grid adjustments.

EDIT: I took the screenshot on a 4:3 screen with resolution 1280:1024 but it behaves the same on a 16:9 screen with resolution 1366:768. And the browser was Chrome.

[HarryMichal]

I tried to fix some of the problems I listed.

1. I made padding a bit bigger by few pixels. Looks fine.
2. Fixed by adjusting button width to 'auto'
3. Adjusted Grid
4. and 5. Again Grid + changes to input component
5. Grid
6. Can be aligned but doesn't look too better.

Also I used at few occasions alignItems prop in Grid. It aligns items vertically. There is other prop called justify but it has to be used in a container.