Initial solution

Author: elsoazemelet

src/renderer/main/MiddlePanelContainer.svelte

@@ -27,22 +27,22 @@
 
   let showFixedStickyContainer = false;
   let gridLayout;
-  onMount(() => {
-    function callback() {
-      const stickyContainer = document.getElementById("sticky-container");
-      const container = document.getElementById("container");
-      const contRect = container.getBoundingClientRect();
-      const stickyRect = stickyContainer.getBoundingClientRect();
-      const threshold = -15;
-
-      showFixedStickyContainer = !(
-        stickyRect.bottom <
-        contRect.bottom + threshold
-      );
-    }
 
-    const observer = new ResizeObserver(callback).observe(gridLayout);
-    window.addEventListener("resize", callback, true);
+  function handleResize(e) {
+    const stickyContainer = document.getElementById("sticky-container");
+    const container = document.getElementById("container");
+    const contRect = container.getBoundingClientRect();
+    const stickyRect = stickyContainer.getBoundingClientRect();
+    const threshold = -15;
+
+    showFixedStickyContainer = !(
+      stickyRect.bottom <
+      contRect.bottom + threshold
+    );
+  }
+
+  onMount(() => {
+    window.addEventListener("resize", handleResize, true);
   });
 
   let showModuleHangingDialog = false;
@@ -90,6 +90,7 @@
 
   <GridLayout
     bind:component={gridLayout}
+    on:resize={handleResize}
     class="absolute z-[0] items-center flex flex-col self-center"
   >
     <div

src/renderer/main/grid-layout/GridLayout.svelte

@@ -1,13 +1,17 @@
 <script>
+  import { watchResize } from "svelte-watch-resize";
   import { writable } from "svelte/store";
   import { runtime } from "../../runtime/runtime.store.js";
   import { appSettings } from "../../runtime/app-helper.store.js";
   import Device from "./grid-modules/Device.svelte";
   import { fade, fly } from "svelte/transition";
   import { derived } from "svelte/store";
+  import { createEventDispatcher } from "svelte";
 
   export let component;
 
+  const dispatch = createEventDispatcher();
+
   const devices = writable([]);
   let columns = 0;
   let rows = 0;
@@ -36,6 +40,10 @@
 
   $: handleScalingChange($scalingPercent);
 
+  function handleResize(e) {
+    dispatch("resize");
+  }
+
   function handleScalingChange(value) {
     calculateLayoutDimensions(rotation, columns, rows, value);
   }
@@ -141,7 +149,11 @@
   }
 </script>
 
-<layout-container class="{$$props.class} " bind:this={component}>
+<layout-container
+  class="{$$props.class} "
+  bind:this={component}
+  use:watchResize={handleResize}
+>
   <div
     style="width: {layoutWidth}px;  height: {layoutHeight}px;"
     class="relative"