Consistent border radius and padding from edge of screen for in game UI (#2576)

## Description:

Moves all the in game ui to have a fixed padding around the edge of the
screen and also makes all the in game ui have the same border radius.


Before:

<img width="569" height="802" alt="image"
src="https://github.com/user-attachments/assets/2d51b66c-26bb-4835-abef-a646565280ba"
/>

<img width="2559" height="1238" alt="image"
src="https://github.com/user-attachments/assets/00723649-bfc7-4e92-bee9-6cff0c2d688c"
/>


After: 

<img width="2559" height="1240" alt="image"
src="https://github.com/user-attachments/assets/8dda98e3-8836-4363-8f33-5b699303ee4f"
/>

<img width="686" height="1122" alt="image"
src="https://github.com/user-attachments/assets/a3820d1c-0579-4b2b-b2a8-7eb790e3ec39"
/>




## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced

## Please put your Discord username so you can be contacted if a bug or
regression is found:

`rovi.`

src/client/index.html

@@ -311,7 +311,7 @@
     </div>
 
     <div
-      class="bottom-0 w-full flex-col-reverse sm:flex-row z-50 md:w-[320px]"
+      class="left-0 bottom-0 sm:left-4 sm:bottom-4 w-full flex-col-reverse sm:flex-row z-50 md:w-[320px]"
       style="position: fixed; pointer-events: none"
     >
       <div
@@ -408,7 +408,7 @@
     <game-starting-modal></game-starting-modal>
     <game-top-bar></game-top-bar>
     <unit-display></unit-display>
-    <div class="flex fixed top-[20px] right-[20px] z-[1000] items-start gap-2">
+    <div class="flex fixed top-4 right-4 z-[1000] items-start gap-2">
       <replay-panel></replay-panel>
       <game-right-sidebar></game-right-sidebar>
     </div>