From 3cea9c967d4b4c0e318f1ee7865e49939f37314b Mon Sep 17 00:00:00 2001
From: Vinzenz Schroeter <vinzenz.f.s@gmail.com>
Date: Sun, 21 Apr 2024 21:37:38 +0200
Subject: [PATCH] improve layout for smaller width

---
 tank-frontend/src/App.css      | 4 +++-
 tank-frontend/src/App.tsx      | 7 ++++++-
 tank-frontend/src/Controls.css | 2 +-
 tank-frontend/src/index.css    | 2 ++
 tank-frontend/vite.config.ts   | 2 +-
 5 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/tank-frontend/src/App.css b/tank-frontend/src/App.css
index 06597b9..af2fb25 100644
--- a/tank-frontend/src/App.css
+++ b/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);
 }
diff --git a/tank-frontend/src/App.tsx b/tank-frontend/src/App.tsx
index 52631e6..254b994 100644
--- a/tank-frontend/src/App.tsx
+++ b/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>;
 }
diff --git a/tank-frontend/src/Controls.css b/tank-frontend/src/Controls.css
index f204c7c..9dd8108 100644
--- a/tank-frontend/src/Controls.css
+++ b/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 {
diff --git a/tank-frontend/src/index.css b/tank-frontend/src/index.css
index dca512d..8ba130b 100644
--- a/tank-frontend/src/index.css
+++ b/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 {
diff --git a/tank-frontend/vite.config.ts b/tank-frontend/vite.config.ts
index 5986416..01699f7 100644
--- a/tank-frontend/vite.config.ts
+++ b/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/