From 77f16482a2164e0e48a9e23f1e21cb624d9f4c0b Mon Sep 17 00:00:00 2001
From: Jason Crawford <jason@jasoncrawford.org>
Date: Fri, 20 Feb 2026 11:02:24 -0500
Subject: [PATCH] Fix EditSiteButton visibility and overlay positioning

The edit button was invisible on the site detail page because it had
opacity-0 with group-hover but no group ancestor. On the main page,
the edit form overlay was broken because it was nested inside an
absolutely positioned wrapper, making its inset-0 relative to the
wrapper instead of the card.

Add overlay prop to EditSiteButton: when true (card context), the
button positions itself absolutely with hover visibility and the form
overlays the card; when false (detail page), both are inline and
always visible.

Fixes #28, fixes #29

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/app/page.tsx                  | 13 ++++++-------
 src/components/EditSiteButton.tsx | 10 ++++++++--
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ae293ba..2eef028 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -184,13 +184,12 @@ export default async function StatusPage() {
                   </div>
                 </Link>
                 {isAdmin && (
-                  <div className="absolute top-3 right-3">
-                    <EditSiteButton
-                      siteId={site.id}
-                      name={site.name}
-                      url={site.url}
-                    />
-                  </div>
+                  <EditSiteButton
+                    siteId={site.id}
+                    name={site.name}
+                    url={site.url}
+                    overlay
+                  />
                 )}
               </div>
             ))}
diff --git a/src/components/EditSiteButton.tsx b/src/components/EditSiteButton.tsx
index f042ecd..c02fff3 100644
--- a/src/components/EditSiteButton.tsx
+++ b/src/components/EditSiteButton.tsx
@@ -7,10 +7,12 @@ export default function EditSiteButton({
   siteId,
   name,
   url,
+  overlay,
 }: {
   siteId: string
   name: string
   url: string
+  overlay?: boolean
 }) {
   const [isEditing, setIsEditing] = useState(false)
 
@@ -18,7 +20,11 @@ export default function EditSiteButton({
     return (
       <button
         onClick={() => setIsEditing(true)}
-        className="flex items-center justify-center rounded cursor-pointer opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0"
+        className={`flex items-center justify-center rounded cursor-pointer flex-shrink-0${
+          overlay
+            ? " absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity"
+            : ""
+        }`}
         style={{
           width: "28px",
           height: "28px",
@@ -47,7 +53,7 @@ export default function EditSiteButton({
 
   return (
     <div
-      className="absolute inset-0 rounded z-10"
+      className={overlay ? "absolute inset-0 rounded z-10" : "rounded"}
       style={{
         backgroundColor: "#FFFFFF",
         border: "1px solid #E8E4DF",