From 0a0a1aa521dcd525fb2cc552bd9250345ec6a4a3 Mon Sep 17 00:00:00 2001
From: Alan Toa <37520667+alantoa@users.noreply.github.com>
Date: Tue, 31 Oct 2023 19:46:54 +0800
Subject: [PATCH] fix: disable truncation of usernames (#2478)

---
 .../app/components/badge/star-drop-badge.tsx  |  3 ++
 .../app/components/profile/profile-top.tsx    | 49 +++++++++----------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/packages/app/components/badge/star-drop-badge.tsx b/packages/app/components/badge/star-drop-badge.tsx
index 8bc640ec78..71f965d110 100644
--- a/packages/app/components/badge/star-drop-badge.tsx
+++ b/packages/app/components/badge/star-drop-badge.tsx
@@ -12,10 +12,12 @@ type StarDropBadgeProps = Omit<
 > & {
   size?: number;
   data?: StarDropBadgeType;
+  tw?: string;
 };
 export const StarDropBadge = ({
   size = 18,
   data,
+  tw,
   ...rest
 }: StarDropBadgeProps) => {
   const router = useRouter();
@@ -29,6 +31,7 @@ export const StarDropBadge = ({
           router.push(`/@${data?.username}/${data.slug}`);
         }
       }}
+      tw={tw}
     >
       <Image
         source={
diff --git a/packages/app/components/profile/profile-top.tsx b/packages/app/components/profile/profile-top.tsx
index b6ea4fabcf..ae4e41c542 100644
--- a/packages/app/components/profile/profile-top.tsx
+++ b/packages/app/components/profile/profile-top.tsx
@@ -269,8 +269,8 @@ export const ProfileTop = memo<ProfileTopProps>(function ProfileTop({
       <View tw="web:bg-gray-100 overflow-hidden bg-gray-400 dark:bg-gray-800">
         <ProfileCover uri={getFullSizeCover(profileData?.profile)} />
       </View>
-      <View tw="-mt-2 px-4">
-        <View tw="flex-row items-center">
+      <View tw="px-4">
+        <View tw="flex-row">
           <Animated.View
             style={[
               {
@@ -281,7 +281,7 @@ export const ProfileTop = memo<ProfileTopProps>(function ProfileTop({
                 borderWidth: AVATAR_BORDER_SIZE,
                 borderColor: isDark ? "#000" : "#FFF",
                 backgroundColor: isDark ? colors.gray[900] : colors.gray[200],
-                margin: -AVATAR_BORDER_SIZE,
+                marginTop: -AVATAR_BORDER_SIZE - 8,
               },
               // avatarStyle,
             ]}
@@ -322,17 +322,17 @@ export const ProfileTop = memo<ProfileTopProps>(function ProfileTop({
               )}
             </Skeleton>
           </Animated.View>
-          <View tw="ml-4 flex-1 flex-row items-start justify-between">
-            <View>
+          <View tw="ml-3.5 mt-3 flex-1 flex-row items-start justify-between">
+            <View tw="w-full">
               <Text
                 tw="max-w-45 text-xl font-bold text-gray-900 dark:text-white"
                 numberOfLines={2}
               >
                 {name}
               </Text>
-              <View tw="h-2 md:h-3" />
+              <View tw="h-2" />
               <Pressable
-                tw="flex-row items-center"
+                tw="flex-1 flex-row flex-wrap items-center"
                 onPress={async () => {
                   if (!username) return;
                   await Clipboard.setStringAsync(username);
@@ -340,33 +340,30 @@ export const ProfileTop = memo<ProfileTopProps>(function ProfileTop({
                 }}
               >
                 {Boolean(username) && (
-                  <>
-                    <Text
-                      tw="max-w-[120px] text-xl text-gray-900 dark:text-gray-400 md:text-lg"
-                      numberOfLines={1}
-                    >
-                      {`@${username}`}
-                    </Text>
-                  </>
+                  <Text
+                    tw="items-center leading-5 text-gray-900 dark:text-gray-400"
+                    style={{ fontSize: 20 }}
+                    numberOfLines={2}
+                  >
+                    {`@${username}`}
+                  </Text>
                 )}
-
-                {profileData?.profile.verified ? (
-                  <View tw="ml-1">
-                    <VerificationBadge size={16} />
-                  </View>
-                ) : null}
                 <View tw="ml-1">
-                  <StarDropBadge
-                    size={16}
-                    data={profileData?.profile.latest_star_drop_collected}
-                  />
+                  {profileData?.profile.verified ? (
+                    <VerificationBadge size={16} />
+                  ) : null}
                 </View>
+                <StarDropBadge
+                  size={16}
+                  data={profileData?.profile.latest_star_drop_collected}
+                  tw="ml-1"
+                />
                 {profileData?.follows_you && !isSelf ? (
                   <Chip label="Follows You" tw="ml-2" />
                 ) : null}
               </Pressable>
             </View>
-            <View tw="ml-auto">
+            <View tw="-mt-1 ml-auto">
               <CompleteProfileButton isSelf={isSelf} />
             </View>
           </View>