fix: 文字过长时头像被挤压

leelu611 · Mar 10, 2023 · 07b92d4 · 07b92d4
1 parent ed4ff67
commit 07b92d4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 7 deletions.
diff --git 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
@@ -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" />