From 236f5bc41347243c0f34fd07713e10e403b6c875 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 20 Apr 2023 19:54:01 +0800
Subject: [PATCH] Make common followers appear elegantly

---
 src/components/account-info.css | 17 ++++++++--
 src/components/account-info.jsx | 56 +++++++++++++++++----------------
 2 files changed, 43 insertions(+), 30 deletions(-)

diff --git a/src/components/account-info.css b/src/components/account-info.css
index c2238683..1133c8e3 100644
--- a/src/components/account-info.css
+++ b/src/components/account-info.css
@@ -200,12 +200,23 @@
 }
 
 .account-container .common-followers {
+  display: grid;
+  grid-template-rows: 1fr;
+  transition: grid-template-rows 0.5s ease-in-out;
+}
+.account-container .common-followers[hidden] {
+  grid-template-rows: 0fr;
+}
+.account-container .common-followers > .common-followers-inner {
+  overflow: hidden;
+}
+.account-container .common-followers p {
+  font-size: 90%;
+  color: var(--text-insignificant-color);
   border-top: 1px solid var(--outline-color);
   border-bottom: 1px solid var(--outline-color);
   padding: 8px 0;
-  font-size: 90%;
-  line-height: 1.5;
-  color: var(--text-insignificant-color);
+  margin: 0;
 }
 
 .timeline-start .account-container {
diff --git a/src/components/account-info.jsx b/src/components/account-info.jsx
index 4b5cb7a4..dbcb4360 100644
--- a/src/components/account-info.jsx
+++ b/src/components/account-info.jsx
@@ -487,33 +487,35 @@ function RelatedActions({ info, instance, authenticated }) {
 
   return (
     <>
-      {familiarFollowers?.length > 0 && (
-        <p class="common-followers">
-          Common followers{' '}
-          <span class="ib">
-            {familiarFollowers.map((follower) => (
-              <a
-                href={follower.url}
-                rel="noopener noreferrer"
-                onClick={(e) => {
-                  e.preventDefault();
-                  states.showAccount = {
-                    account: follower,
-                    instance,
-                  };
-                }}
-              >
-                <Avatar
-                  url={follower.avatarStatic}
-                  size="l"
-                  alt={`${follower.displayName} @${follower.acct}`}
-                  squircle={follower?.bot}
-                />
-              </a>
-            ))}
-          </span>
-        </p>
-      )}
+      <div class="common-followers" hidden={!familiarFollowers?.length}>
+        <div class="common-followers-inner">
+          <p>
+            Common followers{' '}
+            <span class="ib">
+              {familiarFollowers.map((follower) => (
+                <a
+                  href={follower.url}
+                  rel="noopener noreferrer"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    states.showAccount = {
+                      account: follower,
+                      instance,
+                    };
+                  }}
+                >
+                  <Avatar
+                    url={follower.avatarStatic}
+                    size="l"
+                    alt={`${follower.displayName} @${follower.acct}`}
+                    squircle={follower?.bot}
+                  />
+                </a>
+              ))}
+            </span>
+          </p>
+        </div>
+      </div>
       <p class="actions">
         {followedBy ? (
           <span class="tag">Following you</span>