Fix anchor text overflow in threads v2

src/components/ProfileHoverCard/index.web.tsx

@@ -74,7 +74,7 @@ export function ProfileHoverCard(props: ProfileHoverCardProps) {
     return props.children
   } else {
     return (
-      <View onPointerMove={onPointerMove} style={[a.flex_shrink]}>
+      <View onPointerMove={onPointerMove} style={[a.flex_shrink, props.style]}>
         <ProfileHoverCardInner {...props} />
       </View>
     )

src/components/ProfileHoverCard/types.ts

@@ -1,7 +1,9 @@
 import type React from 'react'
 
-export type ProfileHoverCardProps = {
+import {type ViewStyleProp} from '#/alf'
-  children: React.ReactElement
+
+export type ProfileHoverCardProps = ViewStyleProp & {
+  children: React.ReactNode
   did: string
   disable?: boolean
 }

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -311,6 +311,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
           isRoot && [a.pt_lg],
         ]}>
         <View style={[a.flex_row, a.gap_md, a.pb_md]}>
+          <View collapsable={false}>
             <PreviewableUserAvatar
               size={42}
               profile={post.author}
@@ -319,26 +320,25 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
               live={live}
               onBeforePress={onOpenAuthor}
             />
-          <View style={[a.flex_1, a.align_start]}>
+          </View>
-            <ProfileHoverCard did={post.author.did}>
-              <View style={[a.flex_1]}>
-                <View style={[a.flex_row, a.align_center]}>
           <Link
             to={authorHref}
-                    style={[a.flex_shrink]}
+            style={[a.flex_1]}
             label={sanitizeDisplayName(
-                      post.author.displayName ||
+              post.author.displayName || sanitizeHandle(post.author.handle),
-                        sanitizeHandle(post.author.handle),
               moderation.ui('displayName'),
             )}
             onPress={onOpenAuthor}>
+            <View style={[a.flex_1, a.align_start]}>
+              <ProfileHoverCard did={post.author.did} style={[a.w_full]}>
+                <View style={[a.flex_row, a.align_center]}>
                   <Text
                     emoji
                     style={[
+                      a.flex_shrink,
                       a.text_lg,
                       a.font_bold,
                       a.leading_snug,
-                        a.self_start,
                     ]}
                     numberOfLines={1}>
                     {sanitizeDisplayName(
@@ -347,17 +347,11 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
                       moderation.ui('displayName'),
                     )}
                   </Text>
-                  </Link>
 
                   <View style={[{paddingLeft: 3, top: -1}]}>
                     <VerificationCheckButton profile={authorShadow} size="md" />
                   </View>
                 </View>
-                <View style={[a.align_start]}>
-                  <Link
-                    style={[a.flex_shrink]}
-                    to={authorHref}
-                    label={sanitizeHandle(post.author.handle, '@')}>
                 <Text
                   style={[
                     a.text_md,
@@ -367,13 +361,11 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
                   numberOfLines={1}>
                   {sanitizeHandle(post.author.handle, '@')}
                 </Text>
-                  </Link>
-                </View>
-              </View>
               </ProfileHoverCard>
             </View>
+          </Link>
           {showFollowButton && (
-            <View>
+            <View collapsable={false}>
               <PostThreadFollowBtn did={post.author.did} />
             </View>
           )}