adjust gadget bar

tank-frontend/src/Controls.css

@@ -1,7 +1,6 @@
 .Controls {
-    display: flex;
     text-align: center;
-    flex-grow: 1;
+    gap: calc(4 * var(--padding-normal));
 }
 
 .Controls-Container {
@@ -27,4 +26,5 @@ kbd {
 
 kbd.space {
     width: calc(3 * var(--kbd-key-size) + 2 * var(--padding-normal));
+    margin-top: calc(var(--kbd-key-size) + var(--padding-normal));
 }

tank-frontend/src/Controls.tsx

@@ -1,7 +1,6 @@
 import './Controls.css';
 import useWebSocket, {ReadyState} from 'react-use-websocket';
 import {useEffect} from 'react';
-import Column from "./components/Column.tsx";
 
 export default function Controls({playerId, logout}: {
     playerId: string,
@@ -62,7 +61,7 @@ export default function Controls({playerId, logout}: {
         };
     }, [readyState]);
 
-    return <Column className="Controls">
+    return <div className="Controls flex-row">
         <div className='flex-column Controls-Container'>
             <h3>Move</h3>
             <kbd>▲</kbd>
@@ -77,5 +76,5 @@ export default function Controls({playerId, logout}: {
             <h3>Fire</h3>
             <kbd className="space">Space</kbd>
         </div>
-    </Column>;
+    </div>;
 }

tank-frontend/src/PlayerInfo.tsx

@@ -23,7 +23,7 @@ export default function PlayerInfo({playerId, logout}: {
         return () => clearInterval(timer);
     }, [playerId]);
 
-    return <Column className='PlayerInfo flex-grow'>
+    return <Column className='PlayerInfo'>
         <h3>
             {player ? `Playing as ${player?.name}` : 'loading...'}
         </h3>

tank-frontend/src/Scoreboard.tsx

@@ -23,7 +23,6 @@ export default function Scoreboard({}: {}) {
 
     return <DataTable
         data={players}
-        className='flex-grow'
         columns={[
             {field: 'name'},
             {