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 && ( -
- Common followers{' '}
-
- {familiarFollowers.map((follower) => (
- {
- e.preventDefault();
- states.showAccount = {
- account: follower,
- instance,
- };
- }}
- >
-
+ Common followers{' '}
+
+ {familiarFollowers.map((follower) => (
+ {
+ e.preventDefault();
+ states.showAccount = {
+ account: follower,
+ instance,
+ };
+ }}
+ >
+
{followedBy ? ( Following you