Moved the settings button, so that it doesn't overlap the profile drop-down on the right-top corner. fixes #174 fixes #187

src/routes/visualize/+page.svelte

@@ -79,44 +79,45 @@
 </script>
 
 <div class="leather w-full p-4 relative">
-  <h1 class="h-leather text-2xl font-bold mb-4">Publication Network</h1>
+  <div class="flex items-center gap-4 mb-4">
-  <!-- Settings Toggle Button -->
+    <h1 class="h-leather text-2xl font-bold">Publication Network</h1>
-
+    
-  <!-- Settings Button - Using Flowbite Components -->
+    <!-- Settings Button - Using Flowbite Components -->
-  {#if !loading && !error}
+    {#if !loading && !error}
-    <Button
+      <Button
-      class="btn-leather fixed right-4 top-24 z-40 rounded-lg min-w-[150px]"
+        class="btn-leather z-10 rounded-lg min-w-[120px]"
-      size="sm"
+        on:click={() => (showSettings = !showSettings)}
-      on:click={() => (showSettings = !showSettings)}
+      >
-    >
+        <CogSolid class="mr-2 h-5 w-5" />
-      <CogSolid class="mr-2 h-5 w-5" />
+        Settings
-      Settings
+      </Button>
-    </Button>
+    {/if}
+  </div>
 
+  {#if !loading && !error && showSettings}
     <!-- Settings Panel -->
-    {#if showSettings}
+    <div
-      <div
+      class="absolute left-[220px] top-14 h-auto w-80 bg-white dark:bg-gray-800 p-4 shadow-lg z-10
-        class="fixed right-0 top-[140px] h-auto w-80 bg-white dark:bg-gray-800 p-4 shadow-lg z-30
+             overflow-y-auto max-h-[calc(100vh-96px)] rounded-lg border
-               overflow-y-auto max-h-[calc(100vh-96px)] rounded-l-lg border-l border-t border-b
+             border-gray-200 dark:border-gray-700"
-               border-gray-200 dark:border-gray-700"
+      transition:fly={{ duration: 300, y: -10, opacity: 1, easing: quintOut }}
-        transition:fly={{ duration: 300, x: 320, opacity: 1, easing: quintOut }}
+    >
-      >
+      <div class="card space-y-4">
-        <div class="card space-y-4">
+        <h2 class="text-xl font-bold mb-4 h-leather">
-          <h2 class="text-xl font-bold mb-4 h-leather">
+          Visualization Settings
-            Visualization Settings
+        </h2>
-          </h2>
 
-          <div class="space-y-4">
+        <div class="space-y-4">
-            <span class="text-sm text-gray-600 dark:text-gray-400">
+          <span class="text-sm text-gray-600 dark:text-gray-400">
-              Showing {events.length} events from {$networkFetchLimit} headers
+            Showing {events.length} events from {$networkFetchLimit} headers
-            </span>
+          </span>
-            <EventLimitControl on:update={handleLimitUpdate} />
+          <EventLimitControl on:update={handleLimitUpdate} />
-            <EventRenderLevelLimit on:update={handleLimitUpdate} />
+          <EventRenderLevelLimit on:update={handleLimitUpdate} />
-          </div>
         </div>
       </div>
-    {/if}
+    </div>
   {/if}
+  
   {#if loading}
     <div class="flex justify-center items-center h-64">
       <div role="status">