diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx index 59c0f3fa3..069cde252 100644 --- a/app/soapbox/components/account.tsx +++ b/app/soapbox/components/account.tsx @@ -1,11 +1,11 @@ -import React, { useLayoutEffect, useRef, useState } from 'react'; +import React, { useRef } from 'react'; import { defineMessages, useIntl, FormattedMessage } from 'react-intl'; import { Link, useHistory } from 'react-router-dom'; import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper'; import VerificationBadge from 'soapbox/components/verification-badge'; import ActionButton from 'soapbox/features/ui/components/action-button'; -import { useAppSelector, useOnScreen } from 'soapbox/hooks'; +import { useAppSelector } from 'soapbox/hooks'; import { getAcct } from 'soapbox/utils/accounts'; import { displayFqn } from 'soapbox/utils/state'; @@ -119,9 +119,6 @@ const Account = ({ }: IAccount) => { const overflowRef = useRef(null); const actionRef = useRef(null); - const isOnScreen = useOnScreen(overflowRef); - - const [style, setStyle] = useState({ visibility: 'hidden' }); const me = useAppSelector((state) => state.me); const username = useAppSelector((state) => account ? getAcct(account, displayFqn(state)) : null); @@ -160,21 +157,6 @@ const Account = ({ const intl = useIntl(); - useLayoutEffect(() => { - const style: React.CSSProperties = {}; - const actionWidth = actionRef.current?.clientWidth || 0; - - if (overflowRef.current) { - if (action && withRelationship && typeof overflowRef.current.style.maxWidth !== 'number') { - style.maxWidth = Math.max(0, overflowRef.current.clientWidth - 30 - avatarSize - actionWidth); - } - } else { - style.visibility = 'hidden'; - } - - setStyle(style); - }, [isOnScreen, overflowRef, actionRef]); - if (!account) { return null; } @@ -225,7 +207,7 @@ const Account = ({ title={account.acct} onClick={(event: React.MouseEvent) => event.stopPropagation()} > - + - + @{username} {account.favicon && (