From 614dddf2b159ae32227a935807403515871035e5 Mon Sep 17 00:00:00 2001
From: limina1 <liminal@duck.com>
Date: Tue, 17 Dec 2024 00:59:37 -0500
Subject: [PATCH] modified observer

---
 src/lib/components/EventNetwork.svelte | 32 ++++++++++++++++++--------
 1 file changed, 22 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/EventNetwork.svelte b/src/lib/components/EventNetwork.svelte
index c02e4c3..66e14b4 100644
--- a/src/lib/components/EventNetwork.svelte
+++ b/src/lib/components/EventNetwork.svelte
@@ -7,11 +7,12 @@
 
   let svg;
   let isDarkMode = false;
-  const width = 1200;
-  const height = 600;
   const nodeRadius = 20;
   const dragRadius = 45;
   const linkDistance = 120;
+  let container: HTMLDivElement;
+  let width: number;
+  let height: number;
   interface NetworkNode {
     id: string;
     event?: NDKEvent;
@@ -309,7 +310,7 @@
     isDarkMode = document.body.classList.contains("dark");
 
     // Watch for theme changes
-    const observer = new MutationObserver((mutations) => {
+    const themeObserver = new MutationObserver((mutations) => {
       mutations.forEach((mutation) => {
         if (mutation.attributeName === "class") {
           const newIsDarkMode = document.body.classList.contains("dark");
@@ -321,22 +322,33 @@
       });
     });
 
-    observer.observe(document.documentElement, {
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        width = entry.contentRect.width;
+        height = entry.contentRect.height || width * 0.6;
+      }
+      if (svg) drawNetwork();
+    });
+
+    // Start observers
+    themeObserver.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ["class"],
     });
-
-    return () => observer.disconnect();
+    resizeObserver.observe(container);
+    // Clean up
+    return () => {
+      themeObserver.disconnect();
+      resizeObserver.disconnect();
+    };
   });
 </script>
 
 # /lib/components/EventNetwork.svelte
-<div class="w-full">
+<div class="w-full h-[600px]" bind:this={container}>
   <svg
     bind:this={svg}
-    class="w-full border border-gray-300 dark:border-gray-700 rounded"
-    {width}
-    {height}
+    class="w-full h-full border border-gray-300 dark:border-gray-700 rounded"
   />
   <div
     class="mt-4 p-4 bg-primary-0 dark:bg-primary-1000 rounded-lg shadow border border-gray-200 dark:border-gray-800"