fix: show icon for all relay states to prevent layout shifts

Show a Circle icon for pending/unpublished relays so there's always
an icon present. This keeps the status indicator container at a
consistent width and prevents flickering when publishing.

- Added Circle icon import
- Show Circle icon for "pending" state
- Reverted to overflow-y-auto (no longer needed with fixed container)
- Status indicator always has fixed width with centered icon

src/components/PostViewer.tsx

@@ -10,6 +10,7 @@ import {
   Server,
   ServerOff,
   Plus,
+  Circle,
 } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "./ui/button";
@@ -752,7 +753,7 @@ export function PostViewer({ windowId }: PostViewerProps = {}) {
             </span>
           </div>
 
-          <div className="space-y-1 max-h-64 overflow-y-scroll">
+          <div className="space-y-1 max-h-64 overflow-y-auto">
             {relayStates.map((relay) => {
               // Get relay connection state from pool
               const poolRelay = relayPoolMap?.get(relay.url);
@@ -800,6 +801,9 @@ export function PostViewer({ windowId }: PostViewerProps = {}) {
 
                   {/* Status indicator */}
                   <div className="flex-shrink-0 w-6 flex items-center justify-center">
+                    {relay.status === "pending" && (
+                      <Circle className="h-4 w-4 text-muted-foreground" />
+                    )}
                     {relay.status === "publishing" && (
                       <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
                     )}