From 9cecb6a45a4877993f456f79c1378761a3ea5ff7 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 25 Jan 2026 15:49:14 +0900
Subject: [PATCH] fix friend sidebar auto scroll issue

---
 src/views/Sidebar/components/FriendItem.vue     |  4 ++--
 src/views/Sidebar/components/FriendsSidebar.vue | 11 ++++++-----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/views/Sidebar/components/FriendItem.vue b/src/views/Sidebar/components/FriendItem.vue
index a870dcc5..e8e957da 100644
--- a/src/views/Sidebar/components/FriendItem.vue
+++ b/src/views/Sidebar/components/FriendItem.vue
@@ -18,7 +18,7 @@
                     friend.ref.statusDescription
                 }}</span>
                 <template v-else>
-                    <div v-if="friend.pendingOffline" class="text-xs">
+                    <div v-if="friend.pendingOffline" class="extra block truncate text-xs">
                         {{ t('side_panel.pending_offline') }}
                     </div>
                     <template v-else-if="isGroupByInstance">
@@ -34,7 +34,7 @@
                     </template>
                     <Location
                         v-else
-                        class="text-xs"
+                        class="extra block truncate text-xs"
                         :location="locationProp"
                         :traveling="travelingProp"
                         :link="false" />
diff --git a/src/views/Sidebar/components/FriendsSidebar.vue b/src/views/Sidebar/components/FriendsSidebar.vue
index 9925f5eb..b0866767 100644
--- a/src/views/Sidebar/components/FriendsSidebar.vue
+++ b/src/views/Sidebar/components/FriendsSidebar.vue
@@ -29,13 +29,13 @@
                             <div class="avatar" :class="userStatusClass(currentUser)">
                                 <img :src="userImage(currentUser)" loading="lazy" />
                             </div>
-                            <div class="detail">
+                            <div class="detail h-9 flex flex-col justify-between">
                                 <span class="name" :style="{ color: currentUser.$userColour }">{{
                                     currentUser.displayName
                                 }}</span>
                                 <Location
                                     v-if="isGameRunning && !gameLogDisabled"
-                                    class="text-xs"
+                                    class="extra block truncate text-xs"
                                     :location="lastLocation.location"
                                     :traveling="lastLocationDestination"
                                     :link="false" />
@@ -44,12 +44,12 @@
                                         isRealInstance(currentUser.$locationTag) ||
                                         isRealInstance(currentUser.$travelingToLocation)
                                     "
-                                    class="text-xs"
+                                    class="extra block truncate text-xs"
                                     :location="currentUser.$locationTag"
                                     :traveling="currentUser.$travelingToLocation"
                                     :link="false" />
 
-                                <span v-else class="text-xs">{{ currentUser.statusDescription }}</span>
+                                <span v-else class="extra block truncate text-xs">{{ currentUser.statusDescription }}</span>
                             </div>
                         </div>
                     </template>
@@ -477,7 +477,8 @@
         });
     });
 
-    watch(virtualRows, () => {
+    const virtualRowCount = computed(() => virtualRows.value.length);
+    watch(virtualRowCount, () => {
         nextTick(() => {
             virtualizer.value?.measure?.();
         });