Truncate secondary names in username and author components (#19468)

* fix: allow name-container inside message content to shrink so secondary-name can be truncated

* fix: responsively truncate contact profile secondary-name

* fix: ensure home chat-list-items use full available width in layout

* fix: adjust layout of home chat-list-item shrinking with notification counter

* fix: adjust layout of home chat-list-item when displaying notification counter

* tidy: simplify alignment

* tweak: adjust alignment of quo/author component for different text sizes

* tidy: extract styles and reformat notification-layout

Author: seanstrom

src/quo/components/messages/author/style.cljs

@@ -9,6 +9,7 @@
 
 (def name-container
   {:margin-right   8
+   :flex-shrink    1
    :flex-direction :row
    :align-items    :flex-end
   })
@@ -31,14 +32,13 @@
 
 (defn secondary-name
   [theme]
-  {:padding-top 1
-   :flex-shrink 999999
+  {:flex-shrink 999999
    :color       (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)})
 
 (defn icon-container
   [is-first?]
   {:margin-left   (if is-first? 4 2)
-   :margin-bottom 4})
+   :margin-bottom 2})
 
 (defn time-text
   [theme]

src/quo/components/messages/author/view.cljs

@@ -13,7 +13,11 @@
   [{:keys [primary-name secondary-name style short-chat-key time-str contact? verified? untrustworthy?
            muted? size theme]
     :or   {size 13}}]
-  [rn/view {:style (merge style/container style {:height (if (= size 15) 21.75 18.2)})}
+  [rn/view
+   {:style (merge style/container
+                  style
+                  {:height         (if (= size 15) 21.75 18.2)
+                   :padding-bottom (if (= size 15) 2 0.5)})}
    [rn/view {:style style/name-container}
     [text/text
      {:weight              :semi-bold

src/quo/components/text_combinations/username/style.cljs

@@ -2,22 +2,27 @@
   (:require [quo.foundations.colors :as colors]))
 
 (def container
-  {:flex-direction :row
-   :height         32})
+  {:flex-direction  :row
+   :justify-content :flex-start
+   :height          32})
 
 (def username-text-container
   {:flex-direction :row
-   :align-items    :flex-end})
+   :align-items    :flex-end
+   :flex-shrink    1})
 
 (defn real-name-text
   [theme blur?]
-  {:color (if blur?
-            (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
-            (colors/theme-colors colors/neutral-60 colors/neutral-40 theme))})
+  {:color       (if blur?
+                  (colors/theme-colors colors/neutral-80-opa-40 colors/white-opa-40 theme)
+                  (colors/theme-colors colors/neutral-60 colors/neutral-40 theme))
+   :flex-shrink 1})
 
 (defn real-name-dot
   [theme blur?]
-  (assoc (real-name-text theme blur?) :margin-horizontal 6))
+  (merge (real-name-text theme blur?)
+         {:margin-horizontal 6
+          :flex-shrink       0}))
 
 (defn status-icon-container
   [name-type status]

src/quo/components/text_combinations/username/view.cljs

@@ -26,7 +26,8 @@
        {:style               (style/real-name-text theme blur?)
         :size                :paragraph-1
         :accessibility-label :real-name
-        :weight              :medium}
+        :weight              :medium
+        :number-of-lines     1}
        real-name]])])
 
 (defn- icon-20

src/status_im/contexts/chat/home/chat_list_item/style.cljs

@@ -11,9 +11,8 @@
    :align-items        :center})
 
 (def chat-data-container
-  {:flex         1
-   :margin-left  8
-   :margin-right 16})
+  {:flex        1
+   :margin-left 8})
 
 (def notification-container
   {:margin-left     :auto
@@ -22,6 +21,11 @@
    :justify-content :center
    :align-items     :center})
 
+(def notification-container-layout
+  {:flex-grow       1
+   :justify-content :center
+   :margin-left     8})
+
 ;; TODO: duplicate of `quo.components.common.unread-grey-dot.style`
 ;; Replace it when this component is defined as part of `quo.components`
 (defn grey-dot

src/status_im/contexts/chat/home/chat_list_item/view.cljs

@@ -184,35 +184,45 @@
      {:customization-color color
       :size                :size-32}]))
 
+(defn- notification-layout
+  [child]
+  [rn/view
+   {:style style/notification-container-layout}
+   [rn/view {:style style/notification-container}
+    child]])
+
 (defn notification
   [{:keys [muted group-chat unviewed-messages-count unviewed-mentions-count]}]
   (let [customization-color (rf/sub [:profile/customization-color])
         unread-messages?    (pos? unviewed-messages-count)
         unread-mentions?    (pos? unviewed-mentions-count)]
-    [rn/view {:style style/notification-container}
-     (cond
-       muted
-       [quo/icon :i/muted {:color colors/neutral-40}]
+    (cond
+      muted
+      [notification-layout
+       [quo/icon :i/muted {:color colors/neutral-40}]]
 
-       (and group-chat unread-mentions?)
+      (and group-chat unread-mentions?)
+      [notification-layout
        [quo/counter
         {:container-style     {:position :relative :right 0}
          :customization-color customization-color
          :accessibility-label :new-message-counter}
-        unviewed-mentions-count]
+        unviewed-mentions-count]]
 
-       ;; TODO: use the grey-dot component when chat-list-item is moved to quo.components
-       (and group-chat unread-messages?)
+      ;; TODO: use the grey-dot component when chat-list-item is moved to quo.components
+      (and group-chat unread-messages?)
+      [notification-layout
        [rn/view
         {:style               (style/grey-dot)
-         :accessibility-label :unviewed-messages-public}]
+         :accessibility-label :unviewed-messages-public}]]
 
-       unread-messages?
+      unread-messages?
+      [notification-layout
        [quo/counter
         {:container-style     {:position :relative :right 0}
          :customization-color customization-color
          :accessibility-label :new-message-counter}
-        unviewed-messages-count])]))
+        unviewed-messages-count]])))
 
 (defn chat-item
   [{:keys [chat-id group-chat color name last-message timestamp muted]
@@ -223,23 +233,25 @@
           (rf/sub [:contacts/contact-two-names-by-identity chat-id]))
         {:keys [ens-verified added?] :as contact} (when-not group-chat
                                                     (rf/sub [:contacts/contact-by-address chat-id]))]
-    [:<>
+    [rn/view {:style {:flex-direction :row}}
      [avatar-view
       {:contact   contact
        :chat-id   chat-id
        :full-name primary-name
        :color     color
        :muted?    muted}]
-     [rn/view {:style style/chat-data-container}
-      [quo/author
-       {:primary-name   primary-name
-        :secondary-name secondary-name
-        :size           15
-        :verified?      ens-verified
-        :contact?       added?
-        :muted?         muted
-        :time-str       (datetime/to-short-str timestamp)}]
-      [last-message-preview group-chat last-message muted]]
+     [rn/view {:style {:flex-shrink 1}}
+      [rn/view {:style style/chat-data-container}
+       [quo/author
+        {:primary-name   primary-name
+         :secondary-name secondary-name
+         :size           15
+         :verified?      ens-verified
+         :contact?       added?
+         :muted?         muted
+         :time-str       (datetime/to-short-str timestamp)
+         :style          {:flex-shrink 1}}]
+       [last-message-preview group-chat last-message muted]]]
      [notification item]]))
 
 (defn chat-user