From 5d305bb8e7dfbf7abb5d36c14a0b8296160cdb82 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Wed, 8 Sep 2021 10:22:48 +0100
Subject: [PATCH] Use correct component to determine device size

---
 .../src/components/context/DeviceBindingsProvider.svelte    | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/context/DeviceBindingsProvider.svelte b/packages/client/src/components/context/DeviceBindingsProvider.svelte
index 4df3f874c3..a6dc64fe74 100644
--- a/packages/client/src/components/context/DeviceBindingsProvider.svelte
+++ b/packages/client/src/components/context/DeviceBindingsProvider.svelte
@@ -3,21 +3,25 @@
   import { onMount } from "svelte"
 
   let width = window.innerWidth
+  let height = window.innerHeight
   const tabletBreakpoint = 768
   const desktopBreakpoint = 1280
   const resizeObserver = new ResizeObserver(entries => {
     if (entries?.[0]) {
       width = entries[0].contentRect?.width
+      height = entries[0].contentRect?.height
     }
   })
 
   $: data = {
     mobile: width && width < tabletBreakpoint,
     tablet: width && width >= tabletBreakpoint && width < desktopBreakpoint,
+    width,
+    height,
   }
 
   onMount(() => {
-    const doc = document.getElementById("device-root")
+    const doc = document.getElementById("app-root")
     resizeObserver.observe(doc)
 
     return () => {