Fix: [v3] QA css issue and mention update (#202)

* Apply display: line-block to the participant list item
* Temporary use getChannelWithoutCache when mention count is updated

Author: HoonBaek

src/smart-components/ChannelList/context/ChannelListProvider.tsx

@@ -251,12 +251,26 @@ const ChannelListProvider: React.FC<ChannelListProviderProps> = (props: ChannelL
             type: channelListActions.ON_LAST_MESSAGE_UPDATED,
             payload: channel,
           });
+          sdk.groupChannel.getChannelWithoutCache(channel.url)
+            .then((ch) => {
+              channelListDispatcher({
+                type: channelListActions.ON_LAST_MESSAGE_UPDATED,
+                payload: ch,
+              });
+            });
         },
         onMentionReceived(channel) {
           channelListDispatcher({
             type: channelListActions.ON_LAST_MESSAGE_UPDATED,
             payload: channel,
           });
+          sdk.groupChannel.getChannelWithoutCache(channel.url)
+            .then((ch) => {
+              channelListDispatcher({
+                type: channelListActions.ON_LAST_MESSAGE_UPDATED,
+                payload: ch,
+              });
+            });
         },
       });
       sdk?.groupChannel?.addGroupChannelHandler(handlerId, handler)

src/smart-components/ChannelList/dux/reducers.js

@@ -185,12 +185,13 @@ export default function reducer(state, action) {
         ...state,
         showSettings: false,
       };
-    case actions.ON_LAST_MESSAGE_UPDATED:
+    case actions.ON_LAST_MESSAGE_UPDATED: {
       return {
         ...state,
         allChannels: state.allChannels.map((channel) => (
           channel?.url === action.payload.url ? action.payload : channel)),
       };
+    }
     case actions.ON_CHANNEL_FROZEN: {
       const channel = action.payload;
       if (state.channelListQuery) {

src/smart-components/OpenChannelSettings/components/OpenChannelSettingsUI/open-channel-ui.scss

@@ -150,6 +150,7 @@
 
     .sendbird-label {
       max-width: 240px;
+      display: inline-block;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;