From 07b92d4edec3a959b232b921616add791f4e3b89 Mon Sep 17 00:00:00 2001
From: ChenZhaoYu <790348264@qq.com>
Date: Fri, 10 Mar 2023 14:20:56 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=96=87=E5=AD=97=E8=BF=87=E9=95=BF?=
 =?UTF-8?q?=E6=97=B6=E5=A4=B4=E5=83=8F=E8=A2=AB=E6=8C=A4=E5=8E=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/UserAvatar/index.vue | 10 +++++-----
 src/views/chat/layout/sider/Footer.vue     |  5 +++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/common/UserAvatar/index.vue b/src/components/common/UserAvatar/index.vue
index 2a77f0a..19b18b4 100644
--- a/src/components/common/UserAvatar/index.vue
+++ b/src/components/common/UserAvatar/index.vue
@@ -11,8 +11,8 @@ const userInfo = computed(() => userStore.userInfo)
 </script>
 
 <template>
-  <div class="flex items-center">
-    <div class="w-10 h-10 overflow-hidden rounded-full">
+  <div class="flex items-center overflow-hidden">
+    <div class="w-10 h-10 overflow-hidden rounded-full shrink-0">
       <template v-if="isString(userInfo.avatar) && userInfo.avatar.length > 0">
         <NAvatar
           size="large"
@@ -25,11 +25,11 @@ const userInfo = computed(() => userStore.userInfo)
         <NAvatar size="large" round :src="defaultAvatar" />
       </template>
     </div>
-    <div class="ml-2">
-      <h2 class="font-bold text-md">
+    <div class="flex-1 min-w-0 ml-2">
+      <h2 class="overflow-hidden font-bold text-md text-ellipsis whitespace-nowrap">
         {{ userInfo.name ?? 'ChenZhaoYu' }}
       </h2>
-      <p class="text-xs text-gray-500">
+      <p class="overflow-hidden text-xs text-gray-500 text-ellipsis whitespace-nowrap">
         <span
           v-if="isString(userInfo.description) && userInfo.description !== ''"
           v-html="userInfo.description"
diff --git a/src/views/chat/layout/sider/Footer.vue b/src/views/chat/layout/sider/Footer.vue
index dedea46..5837547 100644
--- a/src/views/chat/layout/sider/Footer.vue
+++ b/src/views/chat/layout/sider/Footer.vue
@@ -9,8 +9,9 @@ const show = ref(false)
 
 <template>
   <footer class="flex items-center justify-between min-w-0 p-4 overflow-hidden border-t dark:border-neutral-800">
-    <UserAvatar />
-
+    <div class="flex-1 flex-shrink-0 overflow-hidden">
+      <UserAvatar />
+    </div>
     <HoverButton :tooltip="$t('setting.setting')" @click="show = true">
       <span class="text-xl text-[#4f555e] dark:text-white">
         <SvgIcon icon="ri:settings-4-line" />