fixed inconsistent disply name

src/app/organisms/channel/ChannelViewCmdBar.jsx

@@ -149,7 +149,7 @@ function FollowingMembers({ roomId, roomTimeline, viewEvent }) {
   return followingMembers.length !== 0 && (
     <TimelineChange
       variant="follow"
-      content={getUsersActionJsx(followingMembers, 'following the conversation.')}
+      content={getUsersActionJsx(roomId, followingMembers, 'following the conversation.')}
       time=""
       onClick={() => openReadReceipts(roomId, lastMEvent.getId())}
     />

src/app/organisms/channel/ChannelViewFloating.jsx

@@ -30,7 +30,7 @@ function ChannelViewFloating({
   function getTypingMessage(members) {
     const userIds = members;
     userIds.delete(mx.getUserId());
-    return getUsersActionJsx([...userIds], 'typing...');
+    return getUsersActionJsx(roomId, [...userIds], 'typing...');
   }
 
   function updateTyping(members) {

src/app/organisms/channel/ChannelViewInput.scss

@@ -29,7 +29,7 @@
     & .btn-cmd-esc {
       display: none;
       margin: 0 var(--sp-extra-tight);
-      padding: var(--sp-ultra-tight) var(--sp-tight);
+      padding: var(--sp-ultra-tight) var(--sp-extra-tight);
       border-radius: calc(var(--bo-radius) / 2);
       box-shadow: var(--bs-surface-border);
       cursor: pointer;

src/app/organisms/channel/common.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 
-import { getUsername } from '../../../util/matrixUtil';
+import initMatrix from '../../../client/initMatrix';
+import { getUsername, getUsernameOfRoomMember } from '../../../util/matrixUtil';
 
 function getTimelineJSXMessages() {
   return {
@@ -134,8 +135,13 @@ function getTimelineJSXMessages() {
   };
 }
 
-function getUsersActionJsx(userIds, actionStr) {
-  const getUserJSX = (username) => <b>{getUsername(username)}</b>;
+function getUsersActionJsx(roomId, userIds, actionStr) {
+  const room = initMatrix.matrixClient.getRoom(roomId);
+  const getUserDisplayName = (userId) => {
+    if (room?.getMember(userId)) return getUsernameOfRoomMember(room.getMember(userId));
+    return getUsername(userId);
+  };
+  const getUserJSX = (userId) => <b>{getUserDisplayName(userId)}</b>;
   if (!Array.isArray(userIds)) return 'Idle';
   if (userIds.length === 0) return 'Idle';
   const MAX_VISIBLE_COUNT = 3;