#8824 Edit button on manage links page added at right place

components/account/manage/Edit.js

@@ -2,13 +2,13 @@ import PencilIcon from "@heroicons/react/24/outline/PencilIcon";
 
 export default function Edit({ href, label = "", children }) {
   return (
-    <div className="relative w-full">
+    <div className="flex w-full ">
       <a
         href={href}
         aria-label={`Edit ${label}`}
-        className="rounded-full bg-secondary-medium p-2 text-white shadow-sm hover:bg-tertiary-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-medium absolute top-0 left-0 pointer z-10"
+        className="rounded-full bg-secondary-medium p-2 text-white shadow-sm hover:bg-tertiary-medium focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary-medium pointer"
       >
-        <PencilIcon className="h-5 w-5" aria-hidden="true" />
+        <PencilIcon className="h-4 w-4" aria-hidden="true" />
       </a>
       {children}
     </div>

components/user/UserLink.js

@@ -36,11 +36,15 @@ export default function UserLink({
     aria = "Globe";
   }
 
+  const edit = (link) => (
+    <Edit
+      href={`/account/manage/link/${link._id}`}
+      label={`${link.name} Link`}
+    />
+  );
+
   const item = (link) => (
-    <Link
-      href={`${BASE_URL}/api/profiles/${username}/links/${link._id}`}
-      target="_blank"
-      rel="noopener noreferrer"
+    <div
       className={classNames(
         animations[link.animation] === animations.iconGlow && "z-0",
         animations[link.animation] !== animations.glow &&
@@ -65,7 +69,15 @@ export default function UserLink({
           </span>
         )}
       </span>
-      <span className="grow">{link.name}</span>
+      <Link
+        href={`${BASE_URL}/api/profiles/${username}/links/${link._id}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="grow"
+      >
+        <span>{link.name}</span>
+      </Link>
+      <span>{edit(link)}</span>
       {manage && link.isPinned && (
         <span className="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium bg-secondary-low text-secondary-high-high ring-1 ring-inset ring-secondary-high/10">
           Pinned
@@ -89,18 +101,10 @@ export default function UserLink({
         </span>
       )}
       {manage && <Bulb isEnabled={isEnabled} />}
-    </Link>
-  );
-
-  const edit = (link) => (
-    <Edit href={`/account/manage/link/${link._id}`} label={`${link.name} Link`}>
-      {item(link)}
-    </Edit>
+    </div>
   );
 
   return (
-    <div className="flex flex-row gap-8 w-full">
-      {manage ? edit(link) : item(link)}
-    </div>
+    <div className="flex flex-row gap-8 w-full">{manage && item(link)}</div>
   );
 }