front: GameHeader as one line of elemnts

webapp/src/components/Header/index.css

@@ -1,19 +1,19 @@
-h1 {
-    display: inline-flex;
-}
-
 .OnlineTgl {
-    transform: scale(.25, .25);
-    width: 1px;
-    height: 1px;
+    transform: scale(.5); 
+    margin-left: -19px;
 }
 
 .app-header {
-    padding: auto;
+    display: flex;
+}
+
+.app-header nav {
     align-items: center;
     justify-content: center;
     display: flex;
     flex-wrap: wrap;
+
+    padding-top: 10px;
 }
 
 .app-header a {

webapp/src/components/Header/index.jsx

@@ -8,35 +8,36 @@ import { AppData } from "../../context/data"
 export default function Header() {
   const [data] = React.useContext(AppData)
 
-  return <div>
-    <h1>
-      CordaCheckers<OnlineToggle />
-    </h1>
-    <nav className='app-header'>
-      <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"}>
-        <span>L</span>
-        <span>e</span>
-        <span>a</span>
-        <span>d</span>
-        <span>e</span>
-        <span>r</span>
-        <span>b</span>
-        <span>o</span>
-        <span>a</span>
-        <span>r</span>
-        <span>d</span>
-      </NavLink>
-
-      <NavLink to="/game" className={data.gamesFetching && "woble"}>
-        <span>G</span>
-        <span>a</span>
-        <span>m</span>
-        <span>e</span>
-      </NavLink>
-
-      <NavLink to="/about" className={""}>
-        About
-      </NavLink>
-    </nav>
-  </div>
+  return (
+    <div className='app-header'>
+      <h1 >
+        CordaCheckers
+      </h1>
+      <OnlineToggle />
+      <nav>
+        <NavLink to="/about" className={""}>
+          About
+        </NavLink>
+        <NavLink to="/game" className={data.gamesFetching && "woble"}>
+          <span>G</span>
+          <span>a</span>
+          <span>m</span>
+          <span>e</span>
+        </NavLink>
+        <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"}>
+          <span>L</span>
+          <span>e</span>
+          <span>a</span>
+          <span>d</span>
+          <span>e</span>
+          <span>r</span>
+          <span>b</span>
+          <span>o</span>
+          <span>a</span>
+          <span>r</span>
+          <span>d</span>
+        </NavLink>
+      </nav>
+    </div>
+  )
 }

webapp/src/components/OnlineTgl/index.css

@@ -1,4 +1,3 @@
-
 .tgl {
   display: none;