Make right item occupy entire space instead of left one. Make left grow if nothing on right.

Signed-off-by: shivekkhurana <shivek@status.im>

src/quo/components/list/item.cljs

@@ -84,10 +84,13 @@
 
 (defn title-column
   [{:keys [title text-color subtitle subtitle-max-lines
-           title-accessibility-label size text-size title-text-weight]}]
+           title-accessibility-label size text-size title-text-weight
+           right-side-present?]}]
   [rn/view {:style (merge (:tiny spacing/padding-horizontal)
-                          {:justify-content :center
+                          ;; make left-side title grow if nothing is present on right-side
-                           :flex            1})}
+                          (when-not right-side-present?
+                            {:flex            1
+                             :justify-content :center}))}
    (cond
 
      (and title subtitle)
@@ -124,15 +127,25 @@
 
 (defn left-side [props]
   [rn/view {:style {:flex-direction :row
-                    :flex           1
+                    ;; Occupy only content width, never grow, but shrink if need be
+                    :flex-grow      0
+                    :flex-shrink    1
                     :align-items    :center}}
    [icon-column props]
    [title-column props]])
 
 (defn right-side [{:keys [chevron active accessory accessory-text animated-accessory?]}]
   (when (or chevron accessory)
-    [rn/view {:style {:align-items    :center
+    [rn/view {:style {:align-items     :center
-                      :flex-direction :row}}
+                      :justify-content :flex-end
+                      :flex-direction  :row
+                      ;; Grow to occupy full space, shrink when need be, but always maitaining 16px left gutter
+                      :flex-grow       1
+                      :flex-shrink     1
+                      :margin-left     16
+                      ;; When the left-side leaves no room for right-side, the rendered element is pushed out. A flex-basis ensures that there is some room reserved.
+                      ;; The number 80px was determined by trial and error.
+                      :flex-basis      80}}
      [rn/view {:style (:tiny spacing/padding-horizontal)}
       (case accessory
         :radio    [controls/radio {:value active}]
@@ -142,6 +155,7 @@
                    {:value active}]
         :switch   [controls/switch {:value active}]
         :text     [text/text {:color           :secondary
+                              :ellipsize-mode  :middle
                               :number-of-lines 1}
                    accessory-text]
         accessory)]
@@ -204,7 +218,8 @@
                    :size                      size
                    :text-size                 text-size
                    :subtitle                  subtitle
-                   :subtitle-max-lines        subtitle-max-lines}]
+                   :subtitle-max-lines        subtitle-max-lines
+                   :right-side-present?       (or accessory chevron)}]
        [right-side {:chevron             chevron
                     :active              active
                     :on-press            on-press

src/status_im/ui/screens/sync_settings/views.cljs

@@ -9,8 +9,10 @@
 
 (views/defview sync-settings []
   (views/letsubs [{:keys [syncing-on-mobile-network?
-                          use-mailservers?]}           [:multiaccount]
+                          use-mailservers?]}          [:multiaccount]
-                  mailserver-id                        [:mailserver/current-id]]
+                  current-mailserver-id               [:mailserver/current-id]
+                  current-fleet                       [:fleets/current-fleet]
+                  mailservers                         [:mailserver/mailservers]]
     [react/view {:style {:flex 1 :background-color colors/white}}
      [topbar/topbar {:title (i18n/label :t/sync-settings)}]
      [react/scroll-view
@@ -29,7 +31,8 @@
                       :title               (i18n/label :t/offline-messaging)
                       :on-press            #(re-frame/dispatch [:navigate-to :offline-messaging-settings])
                       :accessory           :text
-                      :accessory-text      (when use-mailservers? mailserver-id)
+                      :accessory-text      (when use-mailservers?
+                                             (get-in mailservers [current-fleet current-mailserver-id :name]))
                       :chevron             true}]
       ;; TODO(Ferossgp): Devider componemt
       [react/view {:height           1