fix: fix layout of input buttons when some are hidden

ui/app/AppLayouts/Chat/ChatColumn/ChatButtons.qml

@@ -15,15 +15,17 @@ Row {
 
     anchors.right: parent.right
     anchors.rightMargin: Style.current.padding
-    spacing: Style.current.padding / 2
+    spacing: 0
 
-    width: childrenRect.width
+    // ChildrenRect doesn't work with the width being able to change
+    width: chatSendBtn.width + emojiIconButton.width +
+           stickerIconButton.width + imageIconButton.width + commandIconButton.width
 
     Button {
         id: chatSendBtn
         visible: txtData.length > 0 || chatColumn.isImage
-        width: 30
-        height: 30
+        width: this.visible ? 30 : 0
+        height: this.width
         text: ""
         anchors.verticalCenter: parent.verticalCenter
         onClicked: {
@@ -43,7 +45,7 @@ Row {
     }
 
     ChatInputButton {
-        id: emojiIconContainer
+        id: emojiIconButton
         source: "../../../img/emojiBtn.svg"
         opened: emojiPopup.opened
         close: function () {
@@ -55,7 +57,7 @@ Row {
     }
 
     ChatInputButton {
-        id: stickerIconContainer
+        id: stickerIconButton
         visible: !chatColumn.isExtendedInput && txtData.length == 0
         source: "../../../img/stickers_icon.svg"
         opened: stickersPopup.opened
@@ -68,7 +70,7 @@ Row {
     }
 
     ChatInputButton {
-        id: imageIconContainer
+        id: imageIconButton
         visible: !chatColumn.isExtendedInput && (chatsModel.activeChannel.chatType === Constants.chatTypePrivateGroupChat || chatsModel.activeChannel.chatType === Constants.chatTypeOneToOne)
         source: "../../../img/images_icon.svg"
         opened: imageDialog.visible

ui/app/AppLayouts/Chat/ChatColumn/ChatComponents/ChatInputButton.qml

@@ -5,15 +5,15 @@ import "../../../../../imports"
 import "../../../../../shared"
 
 Rectangle {
-    property url source: ""
+    property url source: "../../../../img/emojiBtn.svg"
     property bool hovered: false
     property bool opened: false
     property var close: function () {}
     property var open: function () {}
 
     id: root
-    width: buttonIcon.width + chatButtonsContainer.iconPadding * 2
-    height: buttonIcon.height + chatButtonsContainer.iconPadding * 2
+    width: this.visible ? buttonIcon.width + 4 + chatButtonsContainer.iconPadding * 2 : 0
+    height: this.visible ? buttonIcon.height + chatButtonsContainer.iconPadding * 2 : 0
     radius: Style.current.radius
     color: hovered ? Style.current.secondaryBackground : Style.current.transparent
     anchors.verticalCenter: parent.verticalCenter
@@ -52,3 +52,9 @@ Rectangle {
         }
     }
 }
+
+/*##^##
+Designer {
+    D{i:0;formeditorZoom:1.5}
+}
+##^##*/