Make common followers appear elegantly

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%;
+  margin: 0;
-  line-height: 1.5;
-  color: var(--text-insignificant-color);
 }
 
 .timeline-start .account-container {

src/components/account-info.jsx

@@ -487,8 +487,9 @@ function RelatedActions({ info, instance, authenticated }) {
 
   return (
     <>
-      {familiarFollowers?.length > 0 && (
+      <div class="common-followers" hidden={!familiarFollowers?.length}>
-        <p class="common-followers">
+        <div class="common-followers-inner">
+          <p>
             Common followers{' '}
             <span class="ib">
               {familiarFollowers.map((follower) => (
@@ -513,7 +514,8 @@ function RelatedActions({ info, instance, authenticated }) {
               ))}
             </span>
           </p>
-      )}
+        </div>
+      </div>
       <p class="actions">
         {followedBy ? (
           <span class="tag">Following you</span>