More CSS improvements

client/src/components/screens/GamePanel/GuessPane/GuessPane.module.css

@@ -5,10 +5,11 @@
   display: grid;
   justify-items: center;
   align-items: center;
-  grid-template-rows: 1fr 5fr;
-  grid-template-areas: 
-    "timer submit"
-    "map map";
+  grid-template-rows: 5fr 1fr;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas:
+    "map map"
+    "timer submit";
 }
 
 .map {
@@ -42,6 +43,8 @@
     --small: 200px;
     --hovered: 400px;
     --transition-time: 400ms;
+    --v-margin: 5px;
+    --control-size: 32px;
   }
 
   .pane {
@@ -58,23 +61,31 @@
   .pane>* {
     width: 100%;
     background-color: #333;
-    text-align: center;
   }
 
   .submit {
-    margin-bottom: 5px;
+    flex-basis: var(--control-size);
+    flex-grow: 0;
+    flex-shrink: 0;
     opacity: 0;
     transition: opacity var(--transition-time) ease-in;
   }
 
   .map {
-    flex: 3;
+    margin-top: var(--v-margin);
+    margin-bottom: var(--v-margin);
     opacity: .5;
     transition: opacity var(--transition-time) ease-in;
   }
 
   .timer {
-    margin-top: 5px;
+    flex-basis: var(--control-size);
+    flex-grow: 0;
+    flex-shrink: 0;
+    padding: 0px;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .pane--small {
@@ -107,12 +118,14 @@
   }
 
   .resize {
-    display: block;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
     position: absolute;
     left: 0px;
     bottom: 0px;
-    width: 24px;
-    height: 24px;
+    width: var(--control-size);
+    height: var(--control-size);
     cursor: pointer;
   }
 }