From 518cfc2d9549a267366cfcd51fbb3439bf337896 Mon Sep 17 00:00:00 2001
From: limiteinductive <benjamintrom@gmail.com>
Date: Sun, 29 Mar 2026 21:29:16 +0200
Subject: [PATCH] fix: reply pill always visible, bigger touch targets, z-index

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/colony/src/components/MessageItem.tsx | 34 +++++++++++-------------
 1 file changed, 16 insertions(+), 18 deletions(-)

diff --git a/ui/colony/src/components/MessageItem.tsx b/ui/colony/src/components/MessageItem.tsx
index 3e349d7..9c20b81 100644
--- a/ui/colony/src/components/MessageItem.tsx
+++ b/ui/colony/src/components/MessageItem.tsx
@@ -152,28 +152,26 @@ export function MessageItem({ message, replyTarget, onReply, onDelete, currentUs
         </div>
 
         {/* Floating action pill — top-right, appears on hover */}
-        {!isDeleted && (
-          <div className="absolute -top-3 right-3 md:opacity-0 md:translate-y-1 md:group-hover:opacity-100 md:group-hover:translate-y-0 transition-all duration-150 flex border-2 border-border bg-card shadow-lg">
+        <div className="absolute -top-3 right-3 md:opacity-0 md:translate-y-1 md:group-hover:opacity-100 md:group-hover:translate-y-0 transition-all duration-150 flex border-2 border-border bg-card shadow-lg z-10">
+          <button
+            type="button"
+            onClick={() => onReply(message.id)}
+            className="px-2.5 py-1.5 text-sm text-muted-foreground hover:text-primary hover:bg-muted/50 transition-colors"
+            title="Reply"
+          >
+            ↩
+          </button>
+          {!isDeleted && message.user.username === currentUsername && (
             <button
               type="button"
-              onClick={() => onReply(message.id)}
-              className="px-2 py-1 text-xs text-muted-foreground hover:text-primary hover:bg-muted/50 transition-colors"
-              title="Reply"
+              onClick={() => onDelete(message.channel_id, message.id)}
+              className="px-2.5 py-1.5 text-sm text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors border-l-2 border-border"
+              title="Delete"
             >
-              ↩
+              ×
             </button>
-            {message.user.username === currentUsername && (
-              <button
-                type="button"
-                onClick={() => onDelete(message.channel_id, message.id)}
-                className="px-2 py-1 text-xs text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors border-l-2 border-border"
-                title="Delete"
-              >
-                ×
-              </button>
-            )}
-          </div>
-        )}
+          )}
+        </div>
 
         {/* Content */}
         <div className={cn(