Resize grid template on ~ tablet sizes

Also set max image width for brew progress to have more predictable
height.

src/lib/components/BrewProgress.svelte

@@ -138,7 +138,8 @@
     }
 
     img {
-      max-width: 30%;
+      width: 30%;
+      max-width: 140px;
       margin-right: 1rem;
       border-radius: 1rem;
     }

src/routes/+page.svelte

@@ -10,9 +10,12 @@
   const { inside, outside } = data;
   let { relays, state } = data;
 
-  const updateState = () => setTimeout(() => fetch('/api/state')
+  const updateState = () =>
-      .then((resp) => resp.json())
+    setTimeout(() => {
-      .then((response: IStateDTO) => state = response), 100)
+      fetch('/api/state')
+        .then((resp) => resp.json())
+        .then((response: IStateDTO) => (state = response));
+    }, 100);
 </script>
 
 <Logo />
@@ -22,7 +25,7 @@
 
   <VerticalSensorDisplay {inside} {outside} {relays} {state} />
 
-  <RelayControls bind:relays="{relays}" on:relaySwitched={updateState} />
+  <RelayControls bind:relays="{relays}" on:relaySwitched="{updateState}" />
 </div>
 
 <style lang="scss">
@@ -39,5 +42,15 @@
       grid-template-columns: 2fr 2fr 3fr;
       margin: 2rem;
     }
+
+    @media (min-width: 900px) and (max-width: 1550px) {
+      grid-template-columns: 2fr 2fr;
+    }
+  }
+
+  :global(.vertical-grid > div:nth-child(3)) {
+    @media (min-width: 900px) and (max-width: 1550px) {
+      margin-top: -185px;
+    }
   }
 </style>