Fixed formatting of events input page for mobile

src/lib/components/EventInput.svelte

@@ -223,7 +223,7 @@
   }
 </script>
 
-<div class="w-full max-w-2xl mx-auto my-8 p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
+<div class="w-full max-w-2xl mx-auto my-8 p-4 sm:p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
   <div class="flex justify-between items-center mb-4">
     <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">Publish Nostr Event</h2>
     <div class="flex gap-2">
@@ -251,7 +251,7 @@
   </div>
   
   <!-- Event ID Search Section -->
-  <div class="mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600">
+  <div class="mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden">
     <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Load Existing Event</h3>
     
     <!-- Load Method Tabs -->
@@ -274,10 +274,10 @@
 
     {#if loadMethod === 'hex'}
       <!-- Hex ID Input -->
-      <div class="flex gap-2">
+      <div class="flex gap-2 min-w-0">
         <input
           type="text"
-          class="input input-bordered flex-1"
+          class="input input-bordered flex-1 min-w-0"
           placeholder="Enter 64-character hex event ID"
           bind:value={eventIdSearch}
           maxlength="64"
@@ -290,7 +290,7 @@
         />
         <button
           type="button"
-          class="btn btn-secondary"
+          class="btn btn-secondary flex-shrink-0"
           onclick={loadEventById}
           disabled={loadingEvent || !eventIdSearch.trim()}
         >

src/lib/components/event_input/EventPreview.svelte

@@ -133,7 +133,7 @@
 </script>
 
 <!-- Event Preview Section -->
-<div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4">
+<div class="mt-6 border-t border-gray-200 dark:border-gray-700 pt-4 overflow-hidden">
   <div class="flex items-center justify-between mb-3">
     <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Event Preview</h3>
     <button
@@ -147,7 +147,7 @@
   
   {#if showJsonPreview}
     {#if eventPreview}
-      <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
+      <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 border border-gray-200 dark:border-gray-600 overflow-hidden">
         {#if eventPreview.type === 'error'}
           <div class="text-red-600 dark:text-red-400 text-sm">
             {eventPreview.message}
@@ -158,7 +158,9 @@
               Event Type: {eventPreview.type === '30040_index_event' ? '30040 Publication Index' : 'Standard Event'}
             </span>
           </div>
-          <pre class="text-xs bg-white dark:bg-gray-900 p-3 rounded border overflow-x-auto text-gray-800 dark:text-gray-200 font-mono whitespace-pre-wrap">{JSON.stringify(eventPreview.event, null, 2)}</pre>
+          <div class="overflow-hidden">
+            <pre class="text-xs bg-white dark:bg-gray-900 p-3 rounded border overflow-x-auto text-gray-800 dark:text-gray-200 font-mono whitespace-pre-wrap break-words max-w-full">{JSON.stringify(eventPreview.event, null, 2)}</pre>
+          </div>
         {/if}
       </div>
     {:else}

src/lib/components/event_input/eventServices.ts

@@ -178,6 +178,12 @@ export async function publishEvent(ndk: any, eventData: EventData, tags: TagData
         ...get(activeOutboxRelays),
         ...get(activeInboxRelays),
       ];
+      
+      console.log("publishEvent: Publishing to relays:", relays);
+      console.log("publishEvent: Anonymous relays:", anonymousRelays);
+      console.log("publishEvent: Active outbox relays:", get(activeOutboxRelays));
+      console.log("publishEvent: Active inbox relays:", get(activeInboxRelays));
+      
       let published = false;
 
       for (const relayUrl of relays) {
@@ -254,9 +260,15 @@ export async function loadEvent(ndk: any, eventId: string): Promise<LoadEventRes
     throw new Error("NDK context not available");
   }
   
+  console.log("loadEvent: Starting search for event ID:", eventId);
+  console.log("loadEvent: NDK pool relays:", Array.from(ndk.pool.relays.values()).map((r: any) => r.url));
+  console.log("loadEvent: Active inbox relays:", get(activeInboxRelays));
+  console.log("loadEvent: Active outbox relays:", get(activeOutboxRelays));
+  
   const foundEvent = await fetchEventWithFallback(ndk, eventId, 10000);
 
   if (foundEvent) {
+    console.log("loadEvent: Successfully found event:", foundEvent.id);
     // Convert NDK event format to our format
     const eventData: EventData = {
       kind: foundEvent.kind, // Use the actual kind from the event
@@ -273,5 +285,6 @@ export async function loadEvent(ndk: any, eventId: string): Promise<LoadEventRes
     return { eventData, tags };
   }
 
+  console.log("loadEvent: Event not found on any relay");
   return null;
 }

src/routes/events/+page.svelte

@@ -1127,7 +1127,7 @@
         {/if}
 
         {#if !event && searchResults.length === 0 && secondOrderResults.length === 0 && tTagResults.length === 0 && !searchValue && !searchInProgress}
-          <div class="mt-8">
+          <div class="mt-8 w-full">
             <Heading tag="h2" class="h-leather mb-4"
               >Publish Nostr Event</Heading
             >
@@ -1150,8 +1150,10 @@
                 and content
               </li>
             </ul>
+            <div class="w-full flex justify-center">
               <EventInput />
             </div>
+          </div>
         {/if}
       </div>
     </div>