header -> top

client/instance.css

@@ -6,12 +6,6 @@
     height: 100%;
 }
 
-.instance-hdr {
-    display: flex;
-    flex-flow: column;
-    flex: 1;
-}
-
 .instance-info {
     flex: 0 1 50%;
     padding-left: 1em;
@@ -46,11 +40,7 @@
     flex-flow: row wrap;
 }
 
-.ready-btn {
-    flex: 1 0 50%;
-}
-
-.ready-btn:hover {
+.ready:hover {
     transition-property: all;
     transition-duration: 0.5s;
     transition-timing-function: ease;

client/src/components/game.component.jsx

@@ -52,7 +52,7 @@ function GamePanel(props) {
     }
 
     const header = (
-        <div className="ready">
+        <div className="top">
             <button
                 className="game-btn instance-btn instance-ui-btn right"
                 onClick={() => sendGameReady()}>

client/src/components/instance.component.jsx

@@ -18,7 +18,7 @@ function InstanceComponent(args) {
 
     if (!instance) return false;
 
-    const rdyClasses = `instance-btn instance-ui-btn ready-btn ${player.ready ? 'ready' : ''}`;
+    const rdyClasses = `instance-btn instance-ui-btn ${player.ready ? 'ready' : ''}`;
     const readyBtn = (
         <button
             className={rdyClasses}
@@ -49,7 +49,7 @@ function InstanceComponent(args) {
 
     return (
         <section className="instance" >
-            <div className="instance-hdr">
+            <div className="top">
                 {actionBtn}
                 {timer}
             </div>

client/styles.css

@@ -549,3 +549,9 @@ figure.gray {
 }
 
 
+section .top {
+    display: flex;
+    flex-flow: column;
+    flex: 1;
+}
+