Long quoted message in the reply box is not cut, goes beyond reply box and overlapped by cancel button (#15382)

* Long quoted message in the reply box is not cut, goes beyond reply box and overlapped by cancel button

* Lint fix

src/status_im/ui2/screens/chat/components/reply/style.cljs

@@ -9,12 +9,25 @@
 (defn quoted-message
   [pin? in-chat-input?]
   (merge {:flex-direction :row
+          :flex           1
           :align-items    :center
-          :width          (if in-chat-input? "80%" "45%")}
+          :width          (if in-chat-input? "100%" "45%")}
          (when-not pin?
-           {:position :absolute
-            :left     34
-            :top      3})))
+           {:left         22
+            :margin-right 22})))
+
+(def reply-from
+  {:flex-direction :row
+   :align-items    :center})
+
+(def message-author-text
+  {:margin-left 4})
+
+(def message-text
+  {:text-transform :none
+   :margin-left    4
+   :margin-top     2
+   :flex           1})
 
 (def gradient
   {:position :absolute

src/status_im/ui2/screens/chat/components/reply/view.cljs

@@ -64,6 +64,17 @@
                            :margin-top     2}}
     (i18n/label :t/message-deleted)]])
 
+(defn reply-from
+  [{:keys [from identicon contact-name current-public-key]}]
+  [rn/view {:style style/reply-from}
+   [photos/member-photo from identicon 16]
+   [quo2.text/text
+    {:weight          :semi-bold
+     :size            :paragraph-2
+     :number-of-lines 1
+     :style           style/message-author-text}
+    (format-reply-author from contact-name current-public-key)]])
+
 (defn reply-message
   [{:keys [from identicon content-type contentType parsed-text content deleted? deleted-for-me?]}
    in-chat-input? pin? recording-audio?]
@@ -84,13 +95,11 @@
         [rn/view {:style (style/quoted-message pin? in-chat-input?)}
          [reply-deleted-message]]
         [rn/view {:style (style/quoted-message pin? in-chat-input?)}
-         [photos/member-photo from identicon 16]
-         [quo2.text/text
-          {:weight          :semi-bold
-           :size            :paragraph-2
-           :number-of-lines 1
-           :style           {:margin-left 4}}
-          (format-reply-author from contact-name current-public-key)]
+         [reply-from
+          {:from               from
+           :identicon          identicon
+           :contact-name       contact-name
+           :current-public-key current-public-key}]
          [quo2.text/text
           {:number-of-lines     1
            :size                :label
@@ -98,9 +107,7 @@
            :accessibility-label :quoted-message
            :ellipsize-mode      :tail
            :style               (merge
-                                 {:text-transform :none
-                                  :margin-left    4
-                                  :margin-top     2}
+                                 style/message-text
                                  (when (or (= constants/content-type-image content-type)
                                            (= constants/content-type-sticker content-type)
                                            (= constants/content-type-audio content-type))