From 071f4aaf858db62711fd54afa7faf19300446585 Mon Sep 17 00:00:00 2001
From: Wan <495709+wa0x6e@users.noreply.github.com>
Date: Wed, 18 Sep 2024 13:48:47 +0900
Subject: [PATCH] fix(ui): fix overflowing text (#4879)

* fix: limit username max length

* fix: break works to prevent content spilling outside the box

* fix: prevent long username to overflow its container

* fix: do not shrink the copy address button to prevent multiline button
---
 src/components/BaseBlock.vue          | 2 +-
 src/components/NavbarAccount.vue      | 2 +-
 src/components/ProfileAddressCopy.vue | 2 +-
 src/views/SpaceDelegate.vue           | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/BaseBlock.vue b/src/components/BaseBlock.vue
index 530e4d134b8..868300c0f0a 100644
--- a/src/components/BaseBlock.vue
+++ b/src/components/BaseBlock.vue
@@ -69,7 +69,7 @@ const isCollapsed = ref(true);
       <div
         v-if="!loading && (!isCollapsed || !isCollapsable)"
         :class="!slim && 'p-4'"
-        class="leading-5 sm:leading-6"
+        class="leading-5 sm:leading-6 break-words"
       >
         <slot />
         <div
diff --git a/src/components/NavbarAccount.vue b/src/components/NavbarAccount.vue
index d440cec5e6c..6496699adb2 100644
--- a/src/components/NavbarAccount.vue
+++ b/src/components/NavbarAccount.vue
@@ -47,7 +47,7 @@ watch(
         />
         <span
           v-if="profile?.name || profile?.ens"
-          class="hidden sm:block"
+          class="hidden sm:block max-w-[120px] truncate"
           v-text="profile.name || profile.ens"
         />
         <span v-else class="hidden sm:block" v-text="shorten(web3Account)" />
diff --git a/src/components/ProfileAddressCopy.vue b/src/components/ProfileAddressCopy.vue
index e2cef8fcc60..38c21693110 100644
--- a/src/components/ProfileAddressCopy.vue
+++ b/src/components/ProfileAddressCopy.vue
@@ -24,7 +24,7 @@ const { copyToClipboard } = useCopy();
       </div>
     </button>
     <button
-      class="flex cursor-pointer items-center rounded border px-1 text-xs"
+      class="flex cursor-pointer items-center rounded border px-1 text-xs shrink-0"
       @click="copyToClipboard(userAddress)"
     >
       {{ shorten(userAddress) }}
diff --git a/src/views/SpaceDelegate.vue b/src/views/SpaceDelegate.vue
index 9aa2867a14a..b2d26450ca1 100644
--- a/src/views/SpaceDelegate.vue
+++ b/src/views/SpaceDelegate.vue
@@ -239,7 +239,7 @@ onBeforeRouteLeave(async () => {
               <div>
                 <AvatarUser :address="address" size="40" />
               </div>
-              <div class="ml-2">
+              <div class="ml-2 truncate">
                 <ProfileName
                   :profile="getProfile(address)"
                   :address="address"