styles

client/cryps.css

@@ -509,10 +509,10 @@ header {
     flex: 1;
 }
 
-.logs {
+/*.logs {
     flex: 0 0 100%;
 }
-
+*/
 .selected-skills {
     flex: 1 1 25%;
 
@@ -565,6 +565,12 @@ header {
         width: 100%;
     }
 
+    .menu-instance-btn {
+        margin-right: 0;
+        margin-bottom: 0.5em;
+        padding: 0.2em;
+    }
+
     .cryps {
         font-size: 0.75em;
         padding: 0 1em;

client/src/components/game.component.jsx

@@ -22,6 +22,26 @@ function GamePanel(props) {
     } = props;
 
     if (!game) return <div>...</div>;
+    if (showLog) {
+        const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
+        return (
+            <main className="game">
+                <div className="instance-hdr">
+                    <button
+                        className="game-back-btn instance-btn instance-ui-btn left"
+                        onClick={() => toggleLog(!showLog)}>
+                        Game
+                    </button>
+                    <div className="spacer">
+                        <div>&nbsp;</div>
+                    </div>
+                </div>
+                <div className="logs">
+                    {logs}
+                </div>
+            </main>
+        );
+    }
 
     const header = (
         <div className="instance-hdr">
@@ -36,23 +56,11 @@ function GamePanel(props) {
             <button
                 className="game-back-btn instance-btn instance-ui-btn left"
                 onClick={() => toggleLog(!showLog)}>
-                {showLog ? 'Game' : 'Log'}
+                Log
             </button>
         </div>
     );
 
-    if (showLog) {
-        const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
-        return (
-            <main className="game">
-                {header}
-                <div className="logs">
-                    {logs}
-                </div>
-            </main>
-        );
-    }
-
     function findCryp(id) {
         const team = game.teams.find(t => t.cryps.find(c => c.id === id));
         if (team) return team.cryps.find(c => c.id === id);