Dynamically truncate the Account's name/username in hidden content

app/soapbox/components/account.tsx

@@ -4,7 +4,7 @@ import { Link } 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 } from 'soapbox/hooks';
+import { useAppSelector, useOnScreen } from 'soapbox/hooks';
 import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
@@ -52,8 +52,9 @@ const Account = ({
   timestampUrl,
   withRelationship = true,
 }: IAccount) => {
-  const overflowRef = React.useRef(null);
+  const overflowRef = React.useRef<HTMLDivElement>(null);
-  const actionRef = React.useRef(null);
+  const actionRef = React.useRef<HTMLDivElement>(null);
+  const isOnScreen = useOnScreen(overflowRef);
 
   const [style, setStyle] = React.useState<React.CSSProperties>({ visibility: 'hidden' });
 
@@ -93,8 +94,8 @@ const Account = ({
   };
 
   React.useEffect(() => {
+    if (isOnScreen) {
       const style: React.CSSProperties = {};
-
       const actionWidth = actionRef.current?.clientWidth;
 
       if (overflowRef.current) {
@@ -104,7 +105,8 @@ const Account = ({
       }
 
       setStyle(style);
-  }, [overflowRef, actionRef]);
+    }
+  }, [isOnScreen, overflowRef, actionRef]);
 
   if (!account) {
     return null;
@@ -161,8 +163,8 @@ const Account = ({
               </LinkEl>
             </ProfilePopper>
 
-            <HStack alignItems='center' space={1}>
+            <HStack alignItems='center' space={1} style={style}>
-              <Text theme='muted' size='sm'>@{username}</Text>
+              <Text theme='muted' size='sm' truncate>@{username}</Text>
 
               {(timestamp) ? (
                 <>

app/soapbox/components/ui/hstack/hstack.tsx

@@ -29,6 +29,7 @@ interface IHStack {
   justifyContent?: 'between' | 'center',
   space?: 0.5 | 1 | 1.5 | 2 | 3 | 4 | 6,
   grow?: boolean,
+  style?: React.CSSProperties
 }
 
 const HStack: React.FC<IHStack> = (props) => {

app/soapbox/features/ui/components/profile-dropdown.tsx

@@ -116,7 +116,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
             const itemProps = menuItem.action ? { onSelect: menuItem.action } : { to: menuItem.to, as: Link };
 
             return (
-              <Comp key={idx} {...itemProps}>
+              <Comp key={idx} {...itemProps} className='truncate'>
                 {menuItem.text}
               </Comp>
             );

app/soapbox/hooks/index.ts

@@ -1 +1,2 @@
 export { useAppSelector } from './useAppSelector';
+export { useOnScreen } from './useOnScreen';

app/soapbox/hooks/useOnScreen.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export const useOnScreen = (ref: React.MutableRefObject<HTMLElement>) =>  {
+  const [isIntersecting, setIntersecting] = React.useState(false);
+
+  const observer = new IntersectionObserver(
+    ([entry]) => setIntersecting(entry.isIntersecting),
+  );
+
+  React.useEffect(() => {
+    observer.observe(ref.current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return isIntersecting;
+};