Tidy up device bindings provider

packages/client/src/components/DeviceBindingsProvider.svelte

@@ -2,21 +2,19 @@
   import Provider from "./Provider.svelte"
   import { onMount } from "svelte"
 
+  let width = window.innerWidth
   const tabletBreakpoint = 768
   const desktopBreakpoint = 1280
-
-  let screenWidth = window.innerWidth
   const resizeObserver = new ResizeObserver(entries => {
     if (entries?.[0]) {
-      screenWidth = entries[0].contentRect?.width
+      width = entries[0].contentRect?.width
     }
   })
-  $: mobile = screenWidth && screenWidth < tabletBreakpoint
+
-  $: tablet =
+  $: data = {
-    screenWidth &&
+    mobile: width && width < tabletBreakpoint,
-    screenWidth >= tabletBreakpoint &&
+    tablet: width && width >= tabletBreakpoint && width < desktopBreakpoint,
-    screenWidth < desktopBreakpoint
+  }
-  $: data = { mobile, tablet }
 
   onMount(() => {
     const doc = document.documentElement