From 316dc8eea9245be8106f16e8e80ba14715851b76 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 21 Jan 2026 15:31:11 +0000
Subject: [PATCH] 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 | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/PostViewer.tsx b/src/components/PostViewer.tsx
index 94edb17..3b9ec6f 100644
--- a/src/components/PostViewer.tsx
+++ b/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" />
                     )}