From 9376da6c5cce3ce64dcb20936eba9f438254005f Mon Sep 17 00:00:00 2001
From: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
Date: Sat, 10 Jun 2023 00:06:38 +0800
Subject: [PATCH] Prevent overflowing of chat name and message preview in the
 Chat List (#16210)

Signed-off-by: Mohamed Javid <19339952+smohamedjavid@users.noreply.github.com>
---
 .../chat/home/chat_list_item/view.cljs        | 41 +++++++++++--------
 1 file changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs
index 7c86e21f9d..64ca90f9d6 100644
--- a/src/status_im2/contexts/chat/home/chat_list_item/view.cljs
+++ b/src/status_im2/contexts/chat/home/chat_list_item/view.cljs
@@ -152,10 +152,9 @@
                              (preview-text-from-content group-chat primary-name message)))]
     [quo/text
      {:size                :paragraph-2
-      :style               {:color        (colors/theme-colors colors/neutral-50
-                                                               colors/neutral-40)
-                            :flex         1
-                            :margin-right 20}
+      :style               {:color (colors/theme-colors colors/neutral-50
+                                                        colors/neutral-40)
+                            :flex  1}
       :number-of-lines     1
       :ellipsize-mode      :tail
       :accessibility-label :chat-message-text}
@@ -179,10 +178,15 @@
 
 (defn name-view
   [display-name contact timestamp]
-  [rn/view {:style {:flex-direction :row}}
+  [rn/view
+   {:style {:flex           1
+            :flex-direction :row}}
    [quo/text
     {:weight              :semi-bold
-     :accessibility-label :chat-name-text}
+     :accessibility-label :chat-name-text
+     :style               {:flex-shrink 1}
+     :number-of-lines     1
+     :ellipsize-mode      :tail}
     display-name]
    [verified-or-contact-icon contact]
    [quo/text
@@ -209,11 +213,12 @@
   [{:keys [chat-id group-chat color name unviewed-messages-count
            timestamp last-message muted]
     :as   item}]
-  (let [display-name (if group-chat
-                       name
-                       (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])))
-        contact      (when-not group-chat
-                       (rf/sub [:contacts/contact-by-address chat-id]))]
+  (let [display-name       (if group-chat
+                             name
+                             (first (rf/sub [:contacts/contact-two-names-by-identity chat-id])))
+        contact            (when-not group-chat
+                             (rf/sub [:contacts/contact-by-address chat-id]))
+        show-unread-badge? (and (not muted) (> unviewed-messages-count 0))]
     [rn/touchable-opacity
      {:style         (style/container)
       :on-press      (open-chat chat-id)
@@ -224,10 +229,14 @@
        :chat-id   chat-id
        :full-name display-name
        :color     color}]
-     [rn/view {:style {:margin-left 8}}
+     [rn/view
+      {:style {:flex         1
+               :margin-left  8
+               :margin-right (if show-unread-badge? 36 0)}}
       [name-view display-name contact timestamp]
       [last-message-preview group-chat last-message]]
-     (when-not muted
-       (when (> unviewed-messages-count 0)
-         [quo/info-count {:style {:top 16}}
-          unviewed-messages-count]))]))
+     (when show-unread-badge?
+       [quo/info-count
+        {:style {:top   16
+                 :right 16}}
+        unviewed-messages-count])]))