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

@@ -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

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)" />

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) }}

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"