[BUG #2087] [BUG #2088] Fixed style issues when amount is too long

src/status_im/components/list/styles.cljs

@@ -38,8 +38,12 @@
 (def left-item-wrapper
   {:margin 14})
 
+(def content-item-wrapper
+  {:flex         1
+   :margin-right 16})
+
 (def right-item-wrapper
-  {:margin 16})
+  {:margin-right 16})
 
 (def base-separator
   {:height           1

src/status_im/components/list/views.cljs

@@ -32,9 +32,11 @@
    [rn/view {:style lst/item}
     [rn/view {:style lst/left-item-wrapper}
      left-action]
-    content
-    [rn/view {:style lst/right-item-wrapper}
-     right-action]]))
+    [rn/view {:style lst/content-item-wrapper}
+     content]
+    (when right-action
+      [rn/view {:style lst/right-item-wrapper}
+       right-action])]))
 
 (defn touchable-item [handler item]
   [rn/touchable-highlight {:on-press handler}

src/status_im/ui/screens/wallet/components/styles.cljs

@@ -105,13 +105,19 @@
    :font-size      15
    :letter-spacing -0.2})
 
+(def wallet-value-container
+  {:flex           1
+   :flex-direction :row})
+
 (def wallet-value
   {:padding-left   6
-   :flex-shrink    1
    :color          styles/color-white-transparent-5
    :font-size      15
    :letter-spacing -0.2})
 
+(def wallet-value-amount
+  {:flex -1})
+
 (def separator
   {:height            1
    :margin-horizontal 15

src/status_im/ui/screens/wallet/components/views.cljs

@@ -107,12 +107,16 @@
      [react/view (merge styles/wallet-container
                         style)
       [react/text {:style styles/wallet-name} (i18n/label :t/main-wallet)]
-      [react/text {:style           styles/wallet-value
-                   :number-of-lines 1
-                   :ellipsizeMode   :middle}
-       (if balance
-         (money/wei->str :eth balance)
-         "...")]]]))
+      (if balance
+        [react/view {:style styles/wallet-value-container}
+         [react/text {:style           (merge styles/wallet-value styles/wallet-value-amount)
+                      :number-of-lines 1
+                      :ellipsize-mode  :tail}
+          (str (money/wei->ether balance))]
+         [react/text {:style styles/wallet-value}
+          (i18n/label :t/eth)]]
+        [react/text {:style styles/wallet-value}
+         "..."])]]))
 
 (defn network-label
   ([n] (network-label [{} n]))

src/status_im/ui/screens/wallet/main/styles.cljs

@@ -129,7 +129,8 @@
    :align-items    :center})
 
 (def asset-item-value
-  {:font-size 16
+  {:flex      -1
+   :font-size 16
    :color     styles/color-black})
 
 (defstyle add-asset-icon

src/status_im/ui/screens/wallet/main/views.cljs

@@ -116,9 +116,13 @@
       (let [{:keys [source style]} (token->image id)]
         [list/item-image source style])
       [react/view {:style styles/asset-item-value-container}
-       [react/text {:style styles/asset-item-value} (str (money/wei->ether amount))]
-       [react/text {:style      styles/asset-item-currency
-                    :uppercase? true}
+       [react/text {:style           styles/asset-item-value
+                    :number-of-lines 1
+                    :ellipsize-mode  :tail}
+        (str (money/wei->ether amount))]
+       [react/text {:style           styles/asset-item-currency
+                    :uppercase?      true
+                    :number-of-lines 1}
         id]]]]
     [add-asset]))