Fix WalletConnect header alignment on Android (#20860)

* fix: header align and max width for summary-tag

* fix: standard-title show ellipse when text is long

* fix: summary-tag long name overflowing

src/quo/components/tags/summary_tag/style.cljs

@@ -4,7 +4,7 @@
 
 (defn main
   [{:keys [type customization-color]} theme]
-  {:justify-content  :center
+  {:justify-content  :flex-start
    :align-items      :center
    :height           32
    :padding-left     4
@@ -16,6 +16,7 @@
 (defn label
   [type theme]
   {:color       (colors/theme-colors colors/neutral-100 colors/white theme)
+   :flex-shrink 1
    :margin-left (if (= type :address) 6 4)})
 
 (def collectible-image

src/quo/components/tags/summary_tag/view.cljs

@@ -58,16 +58,19 @@
     - :emoji - string - emoji used for displaying account avatar
     - :image-source - resource - image to display on :network, :collectible and :user
     - :theme - :light / :dark"
-  [{:keys [label customization-color type]
+  [{:keys [label customization-color type container-style]
     :as   props
     :or   {customization-color colors/neutral-80-opa-5}}]
   (let [theme (quo.theme/use-theme)]
     [rn/view
      {:accessibility-label :container
-      :style               (style/main (assoc props :customization-color customization-color) theme)}
+      :style               (merge (style/main (assoc props :customization-color customization-color)
+                                              theme)
+                                  container-style)}
      [left-view props]
      [text/text
       {:style           (style/label type theme)
        :weight          :semi-bold
+       :number-of-lines 1
        :size            :heading-1}
       label]]))

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

@@ -21,3 +21,8 @@
   (if blur?
     (colors/theme-colors colors/neutral-80-opa-70 colors/white-opa-70 theme)
     (colors/theme-colors colors/neutral-50 colors/neutral-40 theme)))
+
+(def text
+  {:flex          1
+   ;; NOTE: assures the ellipses are not cut off when text is too long
+   :padding-right 2})

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

@@ -59,7 +59,9 @@
   [rn/view {:style (merge style/container container-style)}
    [text/text
     {:size                :heading-1
+     :number-of-lines     1
      :weight              :semi-bold
+     :style               style/text
      :accessibility-label accessibility-label}
     title]
    (case right

src/status_im/contexts/wallet/wallet_connect/modals/common/header/style.cljs

@@ -1,10 +1,23 @@
-(ns status-im.contexts.wallet.wallet-connect.modals.common.header.style)
+(ns status-im.contexts.wallet.wallet-connect.modals.common.header.style
+  (:require [quo.foundations.typography :as typography]))
+
+(def ^:private line-height (:line-height typography/heading-1))
 
 (def header-container
-  {:padding-vertical 12})
+  {:padding-vertical 12
+   :justify-content  :flex-start
+   :align-items      :center
+   :flex-direction   :row
+   :flex-wrap        :wrap
+   :row-gap          2})
 
-(def header-dapp-name
+(def word-container
-  {:margin-top -4})
+  {:height          line-height
+   :justify-content :center})
 
-(def header-account-name
+(def dapp-container
-  {:padding-top 4})
+  {:margin-top 0
+   :height     line-height})
+
+(def account-container
+  {:height line-height})

src/status_im/contexts/wallet/wallet_connect/modals/common/header/view.cljs

@@ -1,30 +1,31 @@
 (ns status-im.contexts.wallet.wallet-connect.modals.common.header.view
-  (:require
+  (:require [clojure.string :as string]
             [quo.core :as quo]
             [react-native.core :as rn]
             [status-im.contexts.wallet.wallet-connect.core :as core]
-    [status-im.contexts.wallet.wallet-connect.modals.common.header.style :as style]
+            [status-im.contexts.wallet.wallet-connect.modals.common.header.style :as style]))
-    [utils.string]))
 
 (defn view
   [{:keys [label dapp account]}]
-  [rn/view
+  [rn/view {:style style/header-container}
-   {:style style/header-container}
-   [quo/text
-    {:size   :heading-1
-     :weight :semi-bold}
    (let [{:keys [name iconUrl url]} dapp
          image-source               (core/compute-dapp-icon-path iconUrl url)]
-      [rn/view {:style style/header-dapp-name}
+     [rn/view {:style style/dapp-container}
       [quo/summary-tag
        {:type         :dapp
         :label        name
         :image-source image-source}]])
-    (str " " label " ")
+   (for [word (string/split label #" ")]
+     ^{:key word}
+     [rn/view {:style style/word-container}
+      [quo/text
+       {:size   :heading-1
+        :weight :semi-bold}
+       (str " " word)]])
    (let [{:keys [emoji customization-color name]} account]
-      [rn/view {:style style/header-account-name}
+     [rn/view {:style style/account-container}
       [quo/summary-tag
        {:type                :account
         :emoji               emoji
         :label               name
-         :customization-color customization-color}]])]])
+        :customization-color customization-color}]])])