Fixing the sizing issues with some extra divs and by keeping height 100%

ui/src/components/game-panel.component.jsx

@@ -10,6 +10,7 @@ const getMapUrl = googleApiKey => `https://maps.googleapis.com/maps/api/js?key=$
 const PositionedStreetView = compose(
   withProps({
     loadingElement: <div style={{ height: `100%` }} />,
+    containerElement: <div style={{ height: "100%" }} />,
     mapElement: <div style={{ height: `100%` }} />,
   }),
   withScriptjs,
@@ -29,7 +30,7 @@ const PositionedStreetView = compose(
 const SelectionMap = compose(
   withProps({
     loadingElement: <div style={{ height: `100%` }} />,
-    containerElement: <div style={{ height: `250px` }} />,
+    containerElement: <div style={{ height: `100%` }} />,
     mapElement: <div style={{ height: `100%` }} />,
   }),
   withScriptjs,
@@ -60,35 +61,38 @@ const GamePanel = ({
   selectedPoint,
   roundSeconds,
   onTimeout,
-  panoHeight = "85vh",
 }) => (
   <div style={{
+    height: "100%",
     display: "flex",
     justifyContent: "space-between",
     alignItems: "center"
   }}>
-    <div style={{ flex: 3 }}>
-      <div style={{ position: "relative", height: "100%"}}>
+    <div style={{ height: "100%", margin: "2px", flex: 3 }}>
+      <div style={{ position: "relative", height: "100%" }}>
         <PositionedStreetView
           googleMapURL={getMapUrl(googleApiKey)}
-          containerElement={<div style={{ height: panoHeight }} />}
           point={streetViewPoint}
         />
       </div>
     </div>
     <div style={{
+      height: "100%",
       flex: 1,
       display: "flex",
       flexDirection: "column",
       justifyContent:"space-around",
     }}>
-      <RoundTimer seconds={roundSeconds} onTimeout={onTimeout} />
-      <SelectionMap
-        googleMapURL={getMapUrl(googleApiKey)}
-        onClick={({ latLng }) => onSelectPoint({ lat: latLng.lat(), lng: latLng.lng() })}
-        markerPosition={selectedPoint}
-      />
+      <RoundTimer style={{ flex: 1 }} seconds={roundSeconds} onTimeout={onTimeout} />
+      <div style={{ height: "100%", margin: "5px", flex: 6 }}>
+        <SelectionMap
+          googleMapURL={getMapUrl(googleApiKey)}
+          onClick={({ latLng }) => onSelectPoint({ lat: latLng.lat(), lng: latLng.lng() })}
+          markerPosition={selectedPoint}
+        />
+      </div>
       <button
+        style={{ margin: "5px", flex: 1 }}
         onClick={onSubmitGuess}
         disabled={selectedPoint === null}
       >