improve layout for smaller width

tank-frontend/src/App.css

@@ -1,4 +1,6 @@
 .GadgetRows {
     justify-content: space-evenly;
-    margin-top: calc(4 * var(--padding-normal));
+    margin-top: var(--padding-big);
+    flex-wrap: wrap;
+    row-gap: var(--padding-big);
 }

tank-frontend/src/App.tsx

@@ -33,6 +33,9 @@ export default function App() {
     }, [nameId, isLoggedIn])();
 
     return <Column className='flex-grow'>
+
+        <ClientScreen logout={logout} theme={theme} playerId={nameId.id}/>
+
         <Row>
             <h1 className='flex-grow'>CCCB-Tanks!</h1>
             <Button text='change colors' onClick={() => setTheme(_ => getRandomTheme())}/>
@@ -42,12 +45,14 @@ export default function App() {
             {nameId.name !== '' &&
                 <Button onClick={() => setNameId(getNewNameId)} text='logout'/>}
         </Row>
-        <ClientScreen logout={logout} theme={theme} playerId={nameId.id}/>
+
         {nameId.name === '' && <JoinForm setNameId={setNameId} clientId={nameId.id}/>}
+
         <Row className='GadgetRows'>
             {isLoggedIn && <Controls playerId={nameId.id}/>}
             {isLoggedIn && <PlayerInfo playerId={nameId.id}/>}
             <Scoreboard/>
         </Row>
+
     </Column>;
 }

tank-frontend/src/Controls.css

@@ -1,6 +1,6 @@
 .Controls {
     text-align: center;
-    gap: calc(4 * var(--padding-normal));
+    gap: var(--padding-big);
 }
 
 .Controls-Container {

tank-frontend/src/index.css

@@ -10,6 +10,7 @@
     box-sizing: border-box;
     font-family: CCCBFont, monospace;
     text-transform: uppercase;
+    appearance: none;
 }
 
 :root {
@@ -22,6 +23,7 @@
     --border-size-thick: 8px;
 
     --padding-normal: 8px;
+    --padding-big: calc(4 * var(--padding-normal));
 }
 
 html, body {

tank-frontend/vite.config.ts

@@ -1,4 +1,4 @@
-import {ConfigEnv, defineConfig} from 'vite';
+import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
 
 // https://vitejs.dev/config/