From 38e42bb37c8bba3b22c984884ccd1a8fdc2ee09b Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Sun, 27 Aug 2023 13:50:32 +0200
Subject: [PATCH] Resize grid template on ~ tablet sizes

Also set max image width for brew progress to have more predictable
height.
---
 src/lib/components/BrewProgress.svelte |  3 ++-
 src/routes/+page.svelte                | 21 +++++++++++++++++----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/BrewProgress.svelte b/src/lib/components/BrewProgress.svelte
index d0396b9..9b3233a 100644
--- a/src/lib/components/BrewProgress.svelte
+++ b/src/lib/components/BrewProgress.svelte
@@ -138,7 +138,8 @@
     }
 
     img {
-      max-width: 30%;
+      width: 30%;
+      max-width: 140px;
       margin-right: 1rem;
       border-radius: 1rem;
     }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index a58fa6b..1b47a26 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -10,9 +10,12 @@
   const { inside, outside } = data;
   let { relays, state } = data;
 
-  const updateState = () => setTimeout(() => fetch('/api/state')
-      .then((resp) => resp.json())
-      .then((response: IStateDTO) => state = response), 100)
+  const updateState = () =>
+    setTimeout(() => {
+      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>