fix: connectivity banner height

Fixes #9803 --the height of the banner was cutting off banner messages spanning multiple lines

Due to the animation of the view surrounding the banner text, calculate the banner height, then re-render the banner with the updated height.

Render a view that wraps not only the message banner itself, but also a hidden (0-opacity and absolutely positioned) view with the banner text that calculates the height of the banner during the `on-layout` event. The banner height calculation causes the reagent atom value change to re-render the banner view with the udpated height.

1. There is an animation on the message banner. The "out" animation (ie when the banner is in the process of disappearing) seems to work correctly. However, there did not seem to be an "in" animation. I'm fairly confident these changes did not break any existing animations, however it's worth noting this so that others who are more familiar with the existing codebase may be in a better place to say otherwise.
2. Testing during changes was done by dispatching the `network-info-changed` event like so:
```
(re-frame/dispatch [::network-info-changed {:isConnected false}])
```

Co-authored-by: Pascal Precht <pascal@status.im>
Co-authored-by: Eric Dvorsak <eric@status.im>
Signed-off-by: andrey <motor4ik@gmail.com>

src/status_im/ui/components/connectivity/view.cljs

@@ -13,9 +13,6 @@
   (:require-macros
    [status-im.utils.views :as views :refer [defview letsubs]]))
 
-(def connectivity-bar-height 36)
-(def neg-connectivity-bar-height (- connectivity-bar-height))
-
 ;; ui-connectivity-status delays
 (def standard-delay 1000)
 (def long-delay 5000)
@@ -81,9 +78,9 @@
 
 (defn manage-visibility
   "status-hidden is a per-view state, while to-hide? is a global state common to
-  all connectivity views (we have at least one view in home and one in chat)"
-  [connected? animate? anim-opacity anim-y status-hidden]
-
+all connectivity views (we have at least one view in home and one in chat)"
+  [connected? animate? anim-opacity anim-y status-hidden connectivity-bar-height]
+  (let [neg-connectivity-bar-height (- @connectivity-bar-height)]
     (if connected?
       (if animate?
         (when (and @to-hide? (not @status-hidden))
@@ -129,17 +126,18 @@
           (animation/set-value anim-opacity 1)
           (animation/set-value anim-y (if platform/desktop? connectivity-bar-height 0))
           (reset! to-hide? true)
-        (reset! status-hidden false)))))
+          (reset! status-hidden false))))))
 
 (defn connectivity-status
-  [{:keys [connected?]} status-hidden]
-  (let [anim-translate-y (animation/create-value neg-connectivity-bar-height)
+  [{:keys [connected?]} status-hidden height]
+  (let [neg-connectivity-bar-height (- @height)
+        anim-translate-y            (animation/create-value neg-connectivity-bar-height)
         anim-opacity                (animation/create-value 0)]
     (reagent/create-class
      {:component-did-mount
       (fn []
         (manage-visibility connected? false
-                           anim-opacity anim-translate-y status-hidden))
+                           anim-opacity anim-translate-y status-hidden height))
       :should-component-update
       ;; ignore :loading-indicator?
       (fn [_ [_ old_p] [_ new_p]]
@@ -148,13 +146,13 @@
       :component-did-update
       (fn [comp]
         (manage-visibility (:connected? (reagent/props comp)) true
-                           anim-opacity anim-translate-y status-hidden))
+                           anim-opacity anim-translate-y status-hidden height))
       :reagent-render
       (fn [{:keys [message on-press-event connected? connecting?] :as opts}]
         (when-not @status-hidden
           [react/animated-view {:style               (styles/text-wrapper
                                                       (assoc opts
-                                                             :height connectivity-bar-height
+                                                             :height @height
                                                              :background-color (if connected?
                                                                                  colors/green
                                                                                  colors/gray)
@@ -174,6 +172,20 @@
                             :on-press (when on-press-event #(re-frame/dispatch [on-press-event]))}
                 (i18n/label message)]))]))})))
 
+(defn connectivity-status-comp
+  [_ _]
+  (let [height (reagent/atom 36)]
+    (fn [props status-hidden]
+      [react/view {}
+       (when-not @status-hidden
+         [react/text {:style     (merge styles/text {:position :absolute
+                                                     :opacity  0})
+                      :on-layout (fn [e]
+                                   (let [h (-> e .-nativeEvent .-layout .-height)]
+                                     (reset! height (+ h (* (:top styles/text) 2)))))}
+          (i18n/label (:message props))])
+       [connectivity-status props status-hidden height]])))
+
 ;; timer updating the enqueued status
 (def timer (atom nil))
 
@@ -243,7 +255,7 @@
         [react/view
          (when (and loading-indicator? @status-hidden)
            [loading-indicator @window-width])]]
-       [connectivity-status
+       [connectivity-status-comp
         (merge (or ui-status-properties
                    {:connected? true :message :t/connected})
                {:window-width @window-width})