From 1d29d53c7bf3dbf89e97bc8e823b95dba76f5fad Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Sun, 29 Jan 2023 22:00:23 +0100
Subject: [PATCH] fix: follow button fixed width

---
 src/Element/FollowButton.css | 3 +++
 src/Element/FollowButton.tsx | 8 +++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 src/Element/FollowButton.css

diff --git a/src/Element/FollowButton.css b/src/Element/FollowButton.css
new file mode 100644
index 00000000..8c27ce23
--- /dev/null
+++ b/src/Element/FollowButton.css
@@ -0,0 +1,3 @@
+.follow-button {
+  width: 92px;
+}
diff --git a/src/Element/FollowButton.tsx b/src/Element/FollowButton.tsx
index 14c95007..da194005 100644
--- a/src/Element/FollowButton.tsx
+++ b/src/Element/FollowButton.tsx
@@ -1,3 +1,4 @@
+import "./FollowButton.css";
 import { useSelector } from "react-redux";
 import useEventPublisher from "Feed/EventPublisher";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -14,6 +15,7 @@ export default function FollowButton(props: FollowButtonProps) {
     const pubkey = parseId(props.pubkey);
     const publiser = useEventPublisher();
     const isFollowing = useSelector<RootState, boolean>(s => s.login.follows?.includes(pubkey) ?? false);
+    const baseClassname = `${props.className} follow-button`
 
     async function follow(pubkey: HexKey) {
         let ev = await publiser.addFollow(pubkey);
@@ -26,7 +28,11 @@ export default function FollowButton(props: FollowButtonProps) {
     }
 
     return (
-        <button type="button" className={isFollowing ? `${props.className ?? ''} secondary` : props.className} onClick={() => isFollowing ? unfollow(pubkey) : follow(pubkey)}>
+        <button
+          type="button"
+          className={isFollowing ? `${baseClassname} secondary` : baseClassname}
+          onClick={() => isFollowing ? unfollow(pubkey) : follow(pubkey)}
+          >
           {isFollowing ? 'Unfollow' : 'Follow'}
         </button>
     )