From 21f3479a9639b603015c9bd7430abae6e907bbb6 Mon Sep 17 00:00:00 2001
From: Aline Gondim Santos <aline.gondimsantos@savoirfairelinux.com>
Date: Tue, 1 Aug 2023 09:33:01 -0300
Subject: [PATCH] messagebar: fix rtl layout

GitLab: #1279

Change-Id: I746fd86a4cf32cbb369ba2c5d57182800d7da0d0
---
 src/app/commoncomponents/JamiIdentifier.qml   |   1 -
 src/app/commoncomponents/MarkdownPopup.qml    |   5 +-
 .../mainview/components/ChatViewFooter.qml    |   3 +
 src/app/mainview/components/MessageBar.qml    | 221 ++++++++----------
 .../components/MessageBarTextArea.qml         |   4 +-
 5 files changed, 112 insertions(+), 122 deletions(-)

diff --git a/src/app/commoncomponents/JamiIdentifier.qml b/src/app/commoncomponents/JamiIdentifier.qml
index 5c656b373..f583d2169 100644
--- a/src/app/commoncomponents/JamiIdentifier.qml
+++ b/src/app/commoncomponents/JamiIdentifier.qml
@@ -130,7 +130,6 @@ Item {
                 id: controlsLayout
 
                 height: childrenRect.height
-                width: childrenRect.width
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.rightMargin: JamiTheme.pushButtonMargins
                 anchors.leftMargin: JamiTheme.pushButtonMargins
diff --git a/src/app/commoncomponents/MarkdownPopup.qml b/src/app/commoncomponents/MarkdownPopup.qml
index 2411fc1b3..b9ad50eb7 100644
--- a/src/app/commoncomponents/MarkdownPopup.qml
+++ b/src/app/commoncomponents/MarkdownPopup.qml
@@ -36,11 +36,12 @@ Popup {
     contentItem: ListView {
         id: listViewTypoSecond
 
-        width: contentWidth + leftMargin
+        width: contentWidth + leftMargin + rightMargin
         height: JamiTheme.chatViewFooterButtonSize
         orientation: ListView.Horizontal
         interactive: false
         leftMargin: 10
+        rightMargin: 10
         spacing: 10
 
         Rectangle {
@@ -53,7 +54,7 @@ Popup {
         model: menuTypoActionsSecond
 
         delegate: PushButton {
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.verticalCenter: parent ? parent.verticalCenter : undefined
 
             preferredSize: JamiTheme.chatViewFooterRealButtonSize
             imageContainerWidth: 20
diff --git a/src/app/mainview/components/ChatViewFooter.qml b/src/app/mainview/components/ChatViewFooter.qml
index 8fe83bd33..8668e9c85 100644
--- a/src/app/mainview/components/ChatViewFooter.qml
+++ b/src/app/mainview/components/ChatViewFooter.qml
@@ -129,6 +129,9 @@ Rectangle {
 
             Layout.alignment: Qt.AlignHCenter
             Layout.preferredWidth: footerColumnLayout.width
+            Layout.leftMargin: marginSize
+            Layout.rightMargin: marginSize
+            Layout.bottomMargin: marginSize
             Layout.preferredHeight: height
 
             property var emojiPicker
diff --git a/src/app/mainview/components/MessageBar.qml b/src/app/mainview/components/MessageBar.qml
index 0bbeb60d2..054710fb2 100644
--- a/src/app/mainview/components/MessageBar.qml
+++ b/src/app/mainview/components/MessageBar.qml
@@ -25,16 +25,11 @@ import net.jami.Enums 1.1
 import net.jami.Constants 1.1
 import "../../commoncomponents"
 
-Rectangle {
+RowLayout {
     id: root
 
-    Layout.fillWidth: true
-    Layout.leftMargin: marginSize
-    Layout.rightMargin: marginSize
-    Layout.bottomMargin: marginSize
-
-    property alias text: textArea.text
-    property var textAreaObj: textArea
+    property alias text: messageBarTextArea.text
+    property var textAreaObj: messageBarTextArea
     property real marginSize: JamiTheme.messageBarMarginSize
     property bool sendButtonVisibility: true
     property bool animate: false
@@ -43,7 +38,7 @@ Rectangle {
     property bool chatViewEnterIsNewLine: UtilsAdapter.getAppValue(Settings.Key.ChatViewEnterIsNewLine)
     property bool showTypoSecond: false
     property bool showPreview: false
-    property bool multiLine: textArea.tooMuch
+    property bool multiLine: messageBarTextArea.tooMuch
 
     property int messageBarLayoutMaximumWidth: 486
 
@@ -56,61 +51,62 @@ Rectangle {
     signal showMapClicked
     signal emojiButtonClicked
 
-    color: JamiTheme.transparentColor
-    height: showTypo || multiLine ? textArea.height + 25 + 3 * marginSize + 1 : textArea.height + marginSize + 1
+    height: showTypo || multiLine ? textAreaObj.height + 25 + 3 * marginSize + 1 : textAreaObj.height + marginSize + 1
 
-    ComboBox {
-        id: showMoreButton
+    Rectangle {
+        Layout.preferredHeight: parent.height
+        Layout.preferredWidth: childrenRect.width
         visible: !CurrentConversation.isSip
-        width: CurrentConversation.isSip ? 0 : JamiTheme.chatViewFooterButtonSize
-        height: JamiTheme.chatViewFooterButtonSize
-
-        anchors.leftMargin: marginSize
-        anchors.bottom: parent.bottom
-        anchors.bottomMargin: marginSize / 2
-
-        background: Rectangle {
-            implicitWidth: showMoreButton.width
-            implicitHeight: showMoreButton.height
-            radius: 5
-            color: JamiTheme.transparentColor
-        }
+        ComboBox {
+            id: showMoreButton
+            width: JamiTheme.chatViewFooterButtonSize
+            height: JamiTheme.chatViewFooterButtonSize
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: marginSize / 2
 
-        MaterialToolTip {
-            id: toolTipMoreButton
+            background: Rectangle {
+                implicitWidth: showMoreButton.width
+                implicitHeight: showMoreButton.height
+                radius: 5
+                color: JamiTheme.transparentColor
+            }
 
-            parent: showMoreButton
-            visible: showMoreButton.hovered && (text.length > 0)
-            delay: Qt.styleHints.mousePressAndHoldInterval
-            text: JamiStrings.showMore
-        }
+            MaterialToolTip {
+                id: toolTipMoreButton
 
-        indicator: ResponsiveImage {
+                parent: showMoreButton
+                visible: showMoreButton.hovered && (text.length > 0)
+                delay: Qt.styleHints.mousePressAndHoldInterval
+                text: JamiStrings.showMore
+            }
 
-            width: 25
-            height: 25
+            indicator: ResponsiveImage {
 
-            anchors.verticalCenter: parent.verticalCenter
-            anchors.horizontalCenter: parent.horizontalCenter
+                width: 25
+                height: 25
 
-            source: JamiResources.more_menu_black_24dp_svg
+                anchors.verticalCenter: parent.verticalCenter
+                anchors.horizontalCenter: parent.horizontalCenter
 
-            color: JamiTheme.chatViewFooterImgColor
-        }
+                source: JamiResources.more_menu_black_24dp_svg
 
-        onHoveredChanged: {
-            if (!sharePopup.opened) {
-                showMoreButton.indicator.color = hovered ? JamiTheme.chatViewFooterImgHoverColor : JamiTheme.chatViewFooterImgColor;
-                showMoreButton.background.color = hovered ? JamiTheme.hoveredButtonColor : JamiTheme.transparentColor;
+                color: JamiTheme.chatViewFooterImgColor
+            }
+
+            onHoveredChanged: {
+                if (!sharePopup.opened) {
+                    showMoreButton.indicator.color = hovered ? JamiTheme.chatViewFooterImgHoverColor : JamiTheme.chatViewFooterImgColor;
+                    showMoreButton.background.color = hovered ? JamiTheme.hoveredButtonColor : JamiTheme.transparentColor;
+                }
             }
-        }
 
-        popup: SharePopup {
-            id: sharePopup
-            y: -180
-            x: -20
+            popup: SharePopup {
+                id: sharePopup
+                y: -180
+                x: -20
 
-            menuMoreButton: listViewMoreButton.menuMoreButton
+                menuMoreButton: listViewMoreButton.menuMoreButton
+            }
         }
     }
 
@@ -125,11 +121,10 @@ Rectangle {
     Rectangle {
         id: rectangle
 
-        anchors.top: parent.top
-        anchors.left: showMoreButton.right
-        anchors.right: sendButtonRow.left
-        anchors.rightMargin: marginSize
-        anchors.leftMargin: marginSize
+        Layout.fillWidth: true
+        Layout.fillHeight: true
+        Layout.rightMargin: marginSize
+        Layout.leftMargin: marginSize
 
         radius: 5
         color: JamiTheme.transparentColor
@@ -158,7 +153,7 @@ Rectangle {
             anchors.fill: parent
 
             MessageBarTextArea {
-                id: textArea
+                id: messageBarTextArea
 
                 objectName: "messageBarTextArea"
                 maxWidth: rectangle.width - messageBarRowLayout.width - 35
@@ -179,14 +174,13 @@ Rectangle {
                 Layout.topMargin: marginSize / 2
                 Layout.bottomMargin: marginSize / 2
                 Layout.rightMargin: marginSize / 2
-                Layout.preferredHeight: {
-                    JamiTheme.chatViewFooterPreferredHeight > contentHeight ? JamiTheme.chatViewFooterPreferredHeight : contentHeight;
-                }
+                Layout.minimumHeight: JamiTheme.chatViewFooterPreferredHeight
+                Layout.preferredHeight: contentHeight
                 Layout.maximumHeight: JamiTheme.chatViewFooterTextAreaMaximumHeight - marginSize / 2
 
                 onSendMessagesRequired: {
                     sendMessageButtonClicked();
-                    textArea.heightBinding();
+                    messageBarTextArea.heightBinding();
                 }
                 onTextChanged: MessagesAdapter.userIsComposing(text ? true : false)
 
@@ -246,55 +240,55 @@ Rectangle {
                 Shortcut {
                     sequence: "Ctrl+B"
                     context: Qt.ApplicationShortcut
-                    onActivated: textArea.markdownShortCut["Bold"]()
+                    onActivated: messageBarTextArea.markdownShortCut["Bold"]()
                 }
 
                 Shortcut {
                     sequence: "Ctrl+I"
                     context: Qt.ApplicationShortcut
-                    onActivated: textArea.markdownShortCut["Italic"]()
+                    onActivated: messageBarTextArea.markdownShortCut["Italic"]()
                 }
 
                 Shortcut {
                     sequence: "Shift+Alt+X"
                     context: Qt.ApplicationShortcut
-                    onActivated: textArea.markdownShortCut["Barre"]()
+                    onActivated: messageBarTextArea.markdownShortCut["Barre"]()
                 }
 
                 Shortcut {
                     sequence: "Ctrl+Alt+H"
                     context: Qt.ApplicationShortcut
-                    onActivated: textArea.markdownShortCut["Heading"]()
+                    onActivated: messageBarTextArea.markdownShortCut["Heading"]()
                 }
 
                 Shortcut {
                     sequence: "Ctrl+Alt+K"
                     context: Qt.ApplicationShortcut
-                    onActivated: textArea.markdownShortCut["Link"]()
+                    onActivated: messageBarTextArea.markdownShortCut["Link"]()
                 }
 
                 Shortcut {
                     sequence: "Ctrl+Alt+C"
                     context: Qt.ApplicationShortcut
-                    onActivated: textArea.markdownShortCut["Code"]()
+                    onActivated: messageBarTextArea.markdownShortCut["Code"]()
                 }
 
                 Shortcut {
                     sequence: "Shift+Alt+9"
                     context: Qt.ApplicationShortcut
-                    onActivated: textArea.markdownShortCut["Quote"]()
+                    onActivated: messageBarTextArea.markdownShortCut["Quote"]()
                 }
 
                 Shortcut {
                     sequence: "Shift+Alt+8"
                     context: Qt.ApplicationShortcut
-                    onActivated: textArea.markdownShortCut["Unordered list"]()
+                    onActivated: messageBarTextArea.markdownShortCut["Unordered list"]()
                 }
 
                 Shortcut {
                     sequence: "Shift+Alt+7"
                     context: Qt.ApplicationShortcut
-                    onActivated: textArea.markdownShortCut["Ordered list"]()
+                    onActivated: messageBarTextArea.markdownShortCut["Ordered list"]()
                 }
 
                 Shortcut {
@@ -310,7 +304,7 @@ Rectangle {
                     context: Qt.ApplicationShortcut
                     onActivated: {
                         showPreview = !showPreview;
-                        textArea.showPreview = showPreview;
+                        messageBarTextArea.showPreview = showPreview;
                     }
                 }
             }
@@ -326,7 +320,6 @@ Rectangle {
                 Layout.rightMargin: 0
 
                 Row {
-
                     anchors.bottom: parent.bottom
                     anchors.bottomMargin: marginSize / 2
 
@@ -370,11 +363,11 @@ Rectangle {
                                 // If the selected text is already formatted with the given characters, remove them
                                 selectedText = text.substring(start, end);
                                 root.text = text.substring(0, start - char1.length) + selectedText + text.substring(end + char2.length);
-                                textArea.selectText(start - char1.length, end - char1.length);
+                                messageBarTextArea.selectText(start - char1.length, end - char1.length);
                             } else {
                                 // Otherwise, add the formatting characters to the selected text
                                 root.text = text.substring(0, start) + char1 + text.substring(start, end) + char2 + text.substring(end);
-                                textArea.selectText(start + char1.length, end + char1.length);
+                                messageBarTextArea.selectText(start + char1.length, end + char1.length);
                             }
                         }
 
@@ -558,7 +551,7 @@ Rectangle {
                                 newEnd = Math.max(startPos + multilineSelectionLength, 0);
                             }
                             root.text = newValue;
-                            textArea.selectText(newStart, newEnd);
+                            messageBarTextArea.selectText(newStart, newEnd);
                         }
 
                         ListView {
@@ -566,8 +559,8 @@ Rectangle {
 
                             objectName: "listViewTypoFirst"
 
-                            visible: width > 0
-                            width: showTypo ? contentWidth + 2 * leftMargin : 0
+                            visible: showTypo
+                            width: contentWidth + 2 * leftMargin
 
                             Behavior on width  {
                                 NumberAnimation {
@@ -588,9 +581,9 @@ Rectangle {
                                     property var iconSrc: JamiResources.bold_black_24dp_svg
                                     property var shortcutText: JamiStrings.bold
                                     property string shortcutKey: "Ctrl+B"
-                                    property bool isStyle: listViewTypo.isStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "**", "**", /\\*\*.+\\*\*/)
+                                    property bool isStyle: listViewTypo.isStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "**", "**", /\\*\*.+\\*\*/)
                                     onTriggered: function clickAction() {
-                                        listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "**", "**", /\\*\*.+\\*\*/);
+                                        listViewTypo.addStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "**", "**", /\\*\*.+\\*\*/);
                                     }
                                 },
                                 Action {
@@ -598,9 +591,9 @@ Rectangle {
                                     property var iconSrc: JamiResources.italic_black_24dp_svg
                                     property var shortcutText: JamiStrings.italic
                                     property string shortcutKey: "Ctrl+I"
-                                    property bool isStyle: listViewTypo.isStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "*", "*", /(?:\*.+\*|\*\*\*.+\*\*\*)/)
+                                    property bool isStyle: listViewTypo.isStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "*", "*", /(?:\*.+\*|\*\*\*.+\*\*\*)/)
                                     onTriggered: function clickAction() {
-                                        listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "*", "*", /(?:\*.+\*|\*\*\*.+\*\*\*)/);
+                                        listViewTypo.addStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "*", "*", /(?:\*.+\*|\*\*\*.+\*\*\*)/);
                                     }
                                 },
                                 Action {
@@ -608,9 +601,9 @@ Rectangle {
                                     property var iconSrc: JamiResources.s_barre_black_24dp_svg
                                     property var shortcutText: JamiStrings.strikethrough
                                     property string shortcutKey: "Shift+Alt+X"
-                                    property bool isStyle: listViewTypo.isStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "~~", "~~", /\~\~.+\~\~/)
+                                    property bool isStyle: listViewTypo.isStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "~~", "~~", /\~\~.+\~\~/)
                                     onTriggered: function clickAction() {
-                                        listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "~~", "~~", /\~\~.+\~\~/);
+                                        listViewTypo.addStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "~~", "~~", /\~\~.+\~\~/);
                                     }
                                 },
                                 Action {
@@ -618,9 +611,9 @@ Rectangle {
                                     property var iconSrc: JamiResources.title_black_24dp_svg
                                     property var shortcutText: JamiStrings.title
                                     property string shortcutKey: "Ctrl+Alt+H"
-                                    property bool isStyle: listViewTypo.isPrefixSyle(root.text, textArea.selectionStart, textArea.selectionEnd, "### ", false)
+                                    property bool isStyle: listViewTypo.isPrefixSyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "### ", false)
                                     onTriggered: function clickAction() {
-                                        listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "### ", false);
+                                        listViewTypo.addPrefixStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "### ", false);
                                     }
                                 },
                                 Action {
@@ -628,9 +621,9 @@ Rectangle {
                                     property var iconSrc: JamiResources.link_web_black_24dp_svg
                                     property var shortcutText: JamiStrings.link
                                     property string shortcutKey: "Ctrl+Alt+K"
-                                    property bool isStyle: listViewTypo.isStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "[", "](url)", /\[.+\]\(.+\)/)
+                                    property bool isStyle: listViewTypo.isStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "[", "](url)", /\[.+\]\(.+\)/)
                                     onTriggered: function clickAction() {
-                                        listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "[", "](url)", /\[.+\]\(.+\)/);
+                                        listViewTypo.addStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "[", "](url)", /\[.+\]\(.+\)/);
                                     }
                                 },
                                 Action {
@@ -638,9 +631,9 @@ Rectangle {
                                     property var iconSrc: JamiResources.code_black_24dp_svg
                                     property var shortcutText: JamiStrings.code
                                     property string shortcutKey: "Ctrl+Alt+C"
-                                    property bool isStyle: listViewTypo.isStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "```", "```", /\`\`\`.+\`\`\`/)
+                                    property bool isStyle: listViewTypo.isStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "```", "```", /\`\`\`.+\`\`\`/)
                                     onTriggered: function clickAction() {
-                                        listViewTypo.addStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "```", "```", /\`\`\`.+\`\`\`/);
+                                        listViewTypo.addStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "```", "```", /\`\`\`.+\`\`\`/);
                                     }
                                 }
                             ]
@@ -648,8 +641,7 @@ Rectangle {
                             model: menuTypoActionsFirst
 
                             delegate: PushButton {
-                                anchors.verticalCenter: parent.verticalCenter
-
+                                anchors.verticalCenter: parent ? parent.verticalCenter : undefined
                                 preferredSize: JamiTheme.chatViewFooterRealButtonSize
                                 imageContainerWidth: 15
                                 imageContainerHeight: 15
@@ -693,11 +685,10 @@ Rectangle {
                         }
 
                         Rectangle {
-
                             height: JamiTheme.chatViewFooterButtonSize
                             color: JamiTheme.transparentColor
-                            visible: width > 0
-                            width: showTypo && showTypoSecond ? 2 : 0
+                            visible: showTypo && showTypoSecond
+                            width: 2
 
                             Rectangle {
                                 anchors.verticalCenter: parent.verticalCenter
@@ -721,6 +712,7 @@ Rectangle {
                                 width: JamiTheme.chatViewFooterRealButtonSize
                                 height: width
                                 anchors.verticalCenter: parent.verticalCenter
+                                anchors.horizontalCenter: parent.horizontalCenter
 
                                 enabled: !showPreview
                                 hoverEnabled: !showPreview
@@ -768,8 +760,8 @@ Rectangle {
 
                         ListView {
                             id: listViewTypoSecond
-                            visible: width > 0
-                            width: showTypo && showTypoSecond ? contentWidth + 2 * leftMargin : 0
+                            visible: showTypo && showTypoSecond
+                            width: contentWidth + 2 * leftMargin
 
                             height: JamiTheme.chatViewFooterButtonSize
                             orientation: ListView.Horizontal
@@ -790,9 +782,9 @@ Rectangle {
                                     property var iconSrc: JamiResources.quote_black_24dp_svg
                                     property var shortcutText: JamiStrings.quote
                                     property string shortcutKey: "Shift+Alt+9"
-                                    property bool isStyle: listViewTypo.isPrefixSyle(root.text, textArea.selectionStart, textArea.selectionEnd, "> ", false)
+                                    property bool isStyle: listViewTypo.isPrefixSyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "> ", false)
                                     onTriggered: function clickAction() {
-                                        listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "> ", false);
+                                        listViewTypo.addPrefixStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "> ", false);
                                     }
                                 },
                                 Action {
@@ -800,9 +792,9 @@ Rectangle {
                                     property var iconSrc: JamiResources.bullet_point_black_24dp_svg
                                     property var shortcutText: JamiStrings.unorderedList
                                     property string shortcutKey: "Shift+Alt+8"
-                                    property bool isStyle: listViewTypo.isPrefixSyle(root.text, textArea.selectionStart, textArea.selectionEnd, "- ", false)
+                                    property bool isStyle: listViewTypo.isPrefixSyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "- ", false)
                                     onTriggered: function clickAction() {
-                                        listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "- ", false);
+                                        listViewTypo.addPrefixStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "- ", false);
                                     }
                                 },
                                 Action {
@@ -810,9 +802,9 @@ Rectangle {
                                     property var iconSrc: JamiResources.bullet_number_black_24dp_svg
                                     property var shortcutText: JamiStrings.orderedList
                                     property string shortcutKey: "Shift+Alt+7"
-                                    property bool isStyle: listViewTypo.isPrefixSyle(root.text, textArea.selectionStart, textArea.selectionEnd, "", true)
+                                    property bool isStyle: listViewTypo.isPrefixSyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "", true)
                                     onTriggered: function clickAction() {
-                                        listViewTypo.addPrefixStyle(root.text, textArea.selectionStart, textArea.selectionEnd, "", true);
+                                        listViewTypo.addPrefixStyle(root.text, messageBarTextArea.selectionStart, messageBarTextArea.selectionEnd, "", true);
                                     }
                                 },
                                 Action {
@@ -834,8 +826,7 @@ Rectangle {
                             model: menuTypoActionsSecond
 
                             delegate: PushButton {
-                                anchors.verticalCenter: parent.verticalCenter
-
+                                anchors.verticalCenter: parent ? parent.verticalCenter : undefined
                                 preferredSize: JamiTheme.chatViewFooterRealButtonSize
                                 imageContainerWidth: 20
                                 imageContainerHeight: 20
@@ -904,7 +895,7 @@ Rectangle {
 
                         onClicked: {
                             showTypo = !showTypo;
-                            if (messageBar.width < messageBarLayoutMaximumWidth + sendButtonRow.width + 2 * JamiTheme.preferredMarginSize)
+                            if (messageBar.width < messageBarLayoutMaximumWidth + sendMessageButton.width + 2 * JamiTheme.preferredMarginSize)
                                 showTypoSecond = false;
                             if (!showDefault)
                                 showDefault = true;
@@ -922,7 +913,6 @@ Rectangle {
                 }
 
                 Row {
-
                     anchors.bottom: parent.bottom
                     anchors.bottomMargin: marginSize / 2
 
@@ -1165,27 +1155,23 @@ Rectangle {
 
                     onClicked: {
                         showPreview = !showPreview;
-                        textArea.showPreview = showPreview;
+                        messageBarTextArea.showPreview = showPreview;
                     }
                 }
             }
         }
     }
 
-    Row {
-        id: sendButtonRow
-
-        spacing: JamiTheme.chatViewFooterRowSpacing
-
-        anchors.bottom: parent.bottom
-        anchors.right: parent.right
-        anchors.rightMargin: sendMessageButton.visible ? marginSize / 2 : 0
-        anchors.bottomMargin: marginSize / 2
-
+    Rectangle {
+        Layout.preferredHeight: parent.height
+        Layout.preferredWidth: childrenRect.width
+        visible: sendButtonVisibility
         PushButton {
             id: sendMessageButton
 
             objectName: "sendMessageButton"
+            anchors.bottom: parent.bottom
+            anchors.bottomMargin: marginSize / 2
 
             enabled: sendButtonVisibility
             hoverEnabled: enabled
@@ -1210,7 +1196,6 @@ Rectangle {
             pressedColor: hoveredColor
 
             opacity: 1
-            visible: opacity
             scale: opacity
 
             Behavior on opacity  {
diff --git a/src/app/mainview/components/MessageBarTextArea.qml b/src/app/mainview/components/MessageBarTextArea.qml
index c924a4f1a..3e439910e 100644
--- a/src/app/mainview/components/MessageBarTextArea.qml
+++ b/src/app/mainview/components/MessageBarTextArea.qml
@@ -30,7 +30,9 @@ JamiFlickable {
 
     property int maxWidth: 330
     property bool tooMuch: {
-        return textArea.contentWidth > maxWidth;
+        if (maxWidth > 0)
+            return textArea.contentWidth > maxWidth;
+        return false;
     }
     property alias text: textArea.text
     property var textAreaObj: textArea
-- 
GitLab