fixed legend

src/app.css

@@ -332,6 +332,9 @@
       border-primary-200 has-[:hover]:border-primary-700;
     @apply dark:bg-primary-1000 dark:border-primary-800
       dark:has-[:hover]:bg-primary-950 dark:has-[:hover]:border-primary-500;
+    max-width: 300px;
+    min-width: 200px;
+    overflow: hidden;
   }
 
   /* Tooltip */

src/lib/components/EventInput.svelte

@@ -493,10 +493,10 @@
 <div
   class="w-full max-w-2xl mx-auto my-8 p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg"
 >
-  <h2 class="text-xl font-bold mb-4">Publish Nostr Event</h2>
+  <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Publish Nostr Event</h2>
   <form class="space-y-4" onsubmit={handleSubmit}>
     <div>
-      <label class="block font-medium mb-1" for="event-kind">Kind</label>
+      <label class="block font-medium mb-1 text-gray-700 dark:text-gray-300" for="event-kind">Kind</label>
       <input
         id="event-kind"
         type="text"
@@ -505,7 +505,7 @@
         required
       />
       {#if !isValidKind(kind)}
-        <div class="text-red-600 text-sm mt-1">
+        <div class="text-red-600 dark:text-red-400 text-sm mt-1">
           Kind must be an integer between 0 and 65535 (NIP-01).
         </div>
       {/if}
@@ -519,7 +519,7 @@
       {/if}
     </div>
     <div>
-      <label class="block font-medium mb-1" for="tags-container">Tags</label>
+      <label class="block font-medium mb-1 text-gray-700 dark:text-gray-300" for="tags-container">Tags</label>
       
       <!-- Extracted Metadata Section -->
       {#if extractedMetadata.length > 0}
@@ -587,7 +587,7 @@
       </div>
     </div>
     <div>
-      <label class="block font-medium mb-1" for="event-content">Content</label>
+      <label class="block font-medium mb-1 text-gray-700 dark:text-gray-300" for="event-content">Content</label>
       <textarea
         id="event-content"
         bind:value={content}
@@ -598,7 +598,7 @@
       ></textarea>
     </div>
     <div>
-      <label class="block font-medium mb-1" for="event-title">Title</label>
+      <label class="block font-medium mb-1 text-gray-700 dark:text-gray-300" for="event-title">Title</label>
       <input
         type="text"
         id="event-title"
@@ -609,7 +609,7 @@
       />
     </div>
     <div>
-      <label class="block font-medium mb-1" for="event-d-tag">d-tag</label>
+      <label class="block font-medium mb-1 text-gray-700 dark:text-gray-300" for="event-d-tag">d-tag</label>
       <input
         type="text"
         id="event-d-tag"
@@ -620,7 +620,7 @@
         required={requiresDTag(kind)}
       />
       {#if dTagError}
-        <div class="text-red-600 text-sm mt-1">{dTagError}</div>
+        <div class="text-red-600 dark:text-red-400 text-sm mt-1">{dTagError}</div>
       {/if}
     </div>
     <div class="flex justify-end">
@@ -631,18 +631,18 @@
       >
     </div>
     {#if loading}
-      <span class="ml-2 text-gray-500">Publishing...</span>
+      <span class="ml-2 text-gray-500 dark:text-gray-400">Publishing...</span>
     {/if}
     {#if error}
-      <div class="mt-2 text-red-600">{error}</div>
+      <div class="mt-2 text-red-600 dark:text-red-400">{error}</div>
     {/if}
     {#if success}
-      <div class="mt-2 text-green-600">{success}</div>
-      <div class="text-xs text-gray-500">
+      <div class="mt-2 text-green-600 dark:text-green-400">{success}</div>
+      <div class="text-xs text-gray-500 dark:text-gray-400">
         Relays: {publishedRelays.join(", ")}
       </div>
       {#if lastPublishedEventId}
-        <div class="mt-2 text-green-700">
+        <div class="mt-2 text-green-700 dark:text-green-300">
           Event ID: <span class="font-mono">{lastPublishedEventId}</span>
           <Button
             onclick={viewPublishedEvent}
@@ -658,9 +658,9 @@
 
   {#if showWarning}
     <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-      <div class="bg-white dark:bg-gray-800 p-6 rounded-lg max-w-md mx-4">
-        <h3 class="text-lg font-bold mb-4">Warning</h3>
-        <p class="mb-4">{warningMessage}</p>
+          <div class="bg-white dark:bg-gray-800 p-6 rounded-lg max-w-md mx-4">
+              <h3 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Warning</h3>
+        <p class="mb-4 text-gray-700 dark:text-gray-300">{warningMessage}</p>
         <div class="flex justify-end space-x-2">
           <button
             type="button"

src/lib/navigator/EventNetwork/Legend.svelte

@@ -247,7 +247,7 @@
               >
                 {showTagAnchors ? 'ON' : 'OFF'}
               </button>
-              <span class="text-sm">Show Tag Anchors</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">Show Tag Anchors</span>
             </div>
             
             {#if showTagAnchors}
@@ -317,7 +317,7 @@
                       bind:group={tagSortMode}
                       class="w-3 h-3"
                     />
-                    <span class="text-xs">Count</span>
+                    <span class="text-xs text-gray-700 dark:text-gray-300">Count</span>
                   </label>
                   <label class="flex items-center gap-1 cursor-pointer">
                     <input
@@ -327,7 +327,7 @@
                       bind:group={tagSortMode}
                       class="w-3 h-3"
                     />
-                    <span class="text-xs">Alphabetical</span>
+                    <span class="text-xs text-gray-700 dark:text-gray-300">Alphabetical</span>
                   </label>
                 </div>
               </div>
@@ -343,7 +343,7 @@
                     title={isDisabled ? `Click to show ${tag.label}` : `Click to hide ${tag.label}`}
                     aria-pressed={!isDisabled}
                   >
-                    <span class="text-xs text-gray-700 dark:text-gray-300" style="opacity: {isDisabled ? 0.5 : 1};">
+                    <span class="text-xs text-gray-700 dark:text-gray-300 truncate max-w-32" style="opacity: {isDisabled ? 0.5 : 1};" title="{tag.label} ({tag.count})">
                       {tag.label} ({tag.count})
                     </span>
                     <div class="flex items-center">
@@ -395,12 +395,12 @@
                 >
                   {showPersonNodes ? 'ON' : 'OFF'}
                 </button>
-                <span class="text-sm">Show Person Nodes</span>
+                <span class="text-sm text-gray-700 dark:text-gray-300">Show Person Nodes</span>
               </div>
               
               {#if showPersonNodes}
                 <div class="flex items-center space-x-3 text-xs">
-                  <label class="flex items-center space-x-1">
+                  <label class="flex items-center space-x-1 text-gray-700 dark:text-gray-300">
                     <input
                       type="checkbox"
                       bind:checked={showSignedBy}
@@ -409,7 +409,7 @@
                     />
                     <span>Signed by</span>
                   </label>
-                  <label class="flex items-center space-x-1">
+                  <label class="flex items-center space-x-1 text-gray-700 dark:text-gray-300">
                     <input
                       type="checkbox"
                       bind:checked={showReferenced}
@@ -432,13 +432,13 @@
                   {/if}
                 </p>
                 
-                <label class="flex items-center gap-1 cursor-pointer">
+                <label class="flex items-center gap-1 cursor-pointer text-gray-700 dark:text-gray-300">
                   <input
                     type="checkbox"
                     onclick={invertPersonSelection}
                     class="w-3 h-3"
                   />
-                  <span class="text-xs">Invert Selection</span>
+                  <span class="text-xs text-gray-700 dark:text-gray-300">Invert Selection</span>
                 </label>
               </div>
               
@@ -466,7 +466,7 @@
                         style="background-color: {person.isFromFollowList ? getEventKindColor(3) : '#10B981'}; opacity: {isDisabled ? 0.3 : 1};"
                       ></span>
                     </div>
-                    <span class="text-xs text-gray-700 dark:text-gray-300" style="opacity: {isDisabled ? 0.5 : 1};">
+                    <span class="text-xs text-gray-700 dark:text-gray-300 truncate" style="opacity: {isDisabled ? 0.5 : 1};" title="{person.displayName || person.pubkey}">
                       {person.displayName || person.pubkey}
                     </span>
                   </button>

src/lib/navigator/EventNetwork/index.svelte

@@ -208,7 +208,9 @@
         svgGroup.attr("transform", event.transform);
       });
 
+    // Initialize with identity transform
     svgElement.call(zoomBehavior);
+    svgElement.call(zoomBehavior.transform, d3.zoomIdentity);
 
     // Set up arrow marker for links
     const defs = svgElement.append("defs");
@@ -505,9 +507,10 @@
 
     // Center the nodes when the simulation is done
     newSimulation.on("end", () => {
-      if (!starVisualization) {
+      // Add a small delay to ensure the simulation has fully settled
+      setTimeout(() => {
         centerGraph();
-      }
+      }, 100);
     });
 
     // Create drag handler
@@ -1183,17 +1186,59 @@
    */
   function centerGraph() {
     if (svg && svgGroup && zoomBehavior) {
-      const svgWidth = svg.clientWidth || width;
-      const svgHeight = svg.clientHeight || height;
+      debug("Centering graph", { width, height });
+      
+      // Get all nodes to calculate bounds
+      const nodes = svgGroup.selectAll('.node').data();
+      if (nodes.length === 0) {
+        debug("No nodes found for centering");
+        return;
+      }
+      
+      // Calculate bounds of all nodes
+      let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
+      nodes.forEach((node: NetworkNode) => {
+        if (node.x != null && node.y != null) {
+          minX = Math.min(minX, node.x);
+          maxX = Math.max(maxX, node.x);
+          minY = Math.min(minY, node.y);
+          maxY = Math.max(maxY, node.y);
+        }
+      });
+      
+      // Calculate the center of the graph content
+      const graphCenterX = (minX + maxX) / 2;
+      const graphCenterY = (minY + maxY) / 2;
       
-      // Reset zoom and center
+      // Calculate the viewBox center
+      const viewBoxCenterX = width / 2;
+      const viewBoxCenterY = height / 2;
+      
+      // Calculate the translation needed to center the graph
+      const translateX = viewBoxCenterX - graphCenterX;
+      const translateY = viewBoxCenterY - graphCenterY;
+      
+      debug("Centering graph", { 
+        graphBounds: { minX, maxX, minY, maxY },
+        graphCenter: { graphCenterX, graphCenterY },
+        viewBoxCenter: { viewBoxCenterX, viewBoxCenterY },
+        translation: { translateX, translateY }
+      });
+
+      // Apply the centering transform
       d3.select(svg)
         .transition()
         .duration(750)
         .call(
           zoomBehavior.transform,
-          d3.zoomIdentity.translate(svgWidth / 2, svgHeight / 2).scale(0.8),
+          d3.zoomIdentity.translate(translateX, translateY).scale(0.8),
         );
+    } else {
+      debug("Cannot center graph - missing required elements", { 
+        hasSvg: !!svg, 
+        hasSvgGroup: !!svgGroup, 
+        hasZoomBehavior: !!zoomBehavior 
+      });
     }
   }
 
@@ -1348,7 +1393,10 @@
         outline
         size="lg"
         class="network-control-button btn-leather rounded-lg p-2"
-        onclick={centerGraph}
+        onclick={() => {
+          debug("Center button clicked");
+          centerGraph();
+        }}
         aria-label="Center graph"
       >
         <svg

src/routes/+page.svelte

@@ -76,7 +76,7 @@
             id="show-my-publications"
             class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
           />
-          <label for="show-my-publications" class="text-sm cursor-pointer">
+          <label for="show-my-publications" class="text-sm cursor-pointer text-gray-700 dark:text-gray-300">
             Show only my publications
           </label>
         </div>