Fix anchor text overflow in threads v2 (#8530)

3 files changed, 49 insertions, 55 deletions

diff --git a/src/components/ProfileHoverCard/index.web.tsx b/src/components/ProfileHoverCard/index.web.tsx
index 17148a1b3..eb6efa4c9 100644
--- a/src/components/ProfileHoverCard/index.web.tsx
+++ b/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>
     )
diff --git a/src/components/ProfileHoverCard/types.ts b/src/components/ProfileHoverCard/types.ts
index 01ef0fce7..7d9e19ac5 100644
--- a/src/components/ProfileHoverCard/types.ts
+++ b/src/components/ProfileHoverCard/types.ts
@@ -1,7 +1,9 @@
 import type React from 'react'
 
-export type ProfileHoverCardProps = {
-  children: React.ReactElement
+import {type ViewStyleProp} from '#/alf'
+
+export type ProfileHoverCardProps = ViewStyleProp & {
+  children: React.ReactNode
   did: string
   disable?: boolean
 }
diff --git a/src/screens/PostThread/components/ThreadItemAnchor.tsx b/src/screens/PostThread/components/ThreadItemAnchor.tsx
index 05088cb48..23a92bc28 100644
--- a/src/screens/PostThread/components/ThreadItemAnchor.tsx
+++ b/src/screens/PostThread/components/ThreadItemAnchor.tsx
@@ -311,69 +311,61 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
           isRoot && [a.pt_lg],
         ]}>
         <View style={[a.flex_row, a.gap_md, a.pb_md]}>
-          <PreviewableUserAvatar
-            size={42}
-            profile={post.author}
-            moderation={moderation.ui('avatar')}
-            type={post.author.associated?.labeler ? 'labeler' : 'user'}
-            live={live}
-            onBeforePress={onOpenAuthor}
-          />
-          <View style={[a.flex_1, a.align_start]}>
-            <ProfileHoverCard did={post.author.did}>
-              <View style={[a.flex_1]}>
+          <View collapsable={false}>
+            <PreviewableUserAvatar
+              size={42}
+              profile={post.author}
+              moderation={moderation.ui('avatar')}
+              type={post.author.associated?.labeler ? 'labeler' : 'user'}
+              live={live}
+              onBeforePress={onOpenAuthor}
+            />
+          </View>
+          <Link
+            to={authorHref}
+            style={[a.flex_1]}
+            label={sanitizeDisplayName(
+              post.author.displayName || 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]}>
-                  <Link
-                    to={authorHref}
-                    style={[a.flex_shrink]}
-                    label={sanitizeDisplayName(
+                  <Text
+                    emoji
+                    style={[
+                      a.flex_shrink,
+                      a.text_lg,
+                      a.font_bold,
+                      a.leading_snug,
+                    ]}
+                    numberOfLines={1}>
+                    {sanitizeDisplayName(
                       post.author.displayName ||
                         sanitizeHandle(post.author.handle),
                       moderation.ui('displayName'),
                     )}
-                    onPress={onOpenAuthor}>
-                    <Text
-                      emoji
-                      style={[
-                        a.text_lg,
-                        a.font_bold,
-                        a.leading_snug,
-                        a.self_start,
-                      ]}
-                      numberOfLines={1}>
-                      {sanitizeDisplayName(
-                        post.author.displayName ||
-                          sanitizeHandle(post.author.handle),
-                        moderation.ui('displayName'),
-                      )}
-                    </Text>
-                  </Link>
+                  </Text>
 
                   <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,
-                        a.leading_snug,
-                        t.atoms.text_contrast_medium,
-                      ]}
-                      numberOfLines={1}>
-                      {sanitizeHandle(post.author.handle, '@')}
-                    </Text>
-                  </Link>
-                </View>
-              </View>
-            </ProfileHoverCard>
-          </View>
+                <Text
+                  style={[
+                    a.text_md,
+                    a.leading_snug,
+                    t.atoms.text_contrast_medium,
+                  ]}
+                  numberOfLines={1}>
+                  {sanitizeHandle(post.author.handle, '@')}
+                </Text>
+              </ProfileHoverCard>
+            </View>
+          </Link>
           {showFollowButton && (
-            <View>
+            <View collapsable={false}>
               <PostThreadFollowBtn did={post.author.did} />
             </View>
           )}