Merge pull request #496 from TianyangRen/main

Fix row height inconsistency on friends page (#495)

Author: Eldemarkki

src/components/friends/FriendListRow.tsx

@@ -64,56 +64,57 @@ export const FriendListRow = ({
         )}
       </TableTd>
       <TableTd style={{ textAlign: "right", padding: "7px 0px" }}>
-        {!isMe && (
-          <Button
-            variant="outline"
-            color="red"
-            size="compact-md"
-            loading={isDeleting}
-            onClick={() => {
-              setIsDeleting(true);
-              removeFriend(username)
-                .then(async (result) => {
-                  if (result && "error" in result) {
-                    switch (result.error) {
-                      case RemoveFriendError.RateLimited:
-                        router.push("/rate-limited");
-                        break;
-                      case RemoveFriendError.Unauthorized:
-                        showNotification({
-                          title: t("error"),
-                          color: "red",
-                          message: t("errors.unauthorized"),
-                        });
-                        await logOutAndRedirect();
-                        break;
-                      case RemoveFriendError.UnknownError:
-                        showNotification({
-                          title: t("error"),
-                          color: "red",
-                          message: t("friends.errorRemovingFriend"),
-                        });
-                        break;
-                    }
-                  } else {
-                    router.refresh();
+        <Button
+          variant="outline"
+          size="compact-md"
+          color="red"
+          loading={isDeleting}
+          // Keep button space consistent across rows; hide for self to match row height
+          style={{ visibility: isMe ? "hidden" : undefined }}
+          aria-hidden={isMe ? "true" : undefined}
+          onClick={() => {
+            setIsDeleting(true);
+            removeFriend(username)
+              .then(async (result) => {
+                if (result && "error" in result) {
+                  switch (result.error) {
+                    case RemoveFriendError.RateLimited:
+                      router.push("/rate-limited");
+                      break;
+                    case RemoveFriendError.Unauthorized:
+                      showNotification({
+                        title: t("error"),
+                        color: "red",
+                        message: t("errors.unauthorized"),
+                      });
+                      await logOutAndRedirect();
+                      break;
+                    case RemoveFriendError.UnknownError:
+                      showNotification({
+                        title: t("error"),
+                        color: "red",
+                        message: t("friends.errorRemovingFriend"),
+                      });
+                      break;
                   }
-                })
-                .catch(() => {
-                  showNotification({
-                    title: t("error"),
-                    color: "red",
-                    message: t("friends.errorRemovingFriend"),
-                  });
-                })
-                .finally(() => {
-                  setIsDeleting(false);
+                } else {
+                  router.refresh();
+                }
+              })
+              .catch(() => {
+                showNotification({
+                  title: t("error"),
+                  color: "red",
+                  message: t("friends.errorRemovingFriend"),
                 });
-            }}
-          >
-            {t("friends.unfriend")}
-          </Button>
-        )}
+              })
+              .finally(() => {
+                setIsDeleting(false);
+              });
+          }}
+        >
+          {t("friends.unfriend")}
+        </Button>
       </TableTd>
     </TableTr>
   );