[#2598] Fixed New messages have their buttons getting overlapped by messages above

Closes #2598

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

@@ -41,6 +41,8 @@ SplitView {
         ScrollBar.vertical.policy: chatLogView.contentHeight > chatLogView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
         ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
+        property int countOnStartUp: 0
+
         ListView {
             id: chatLogView
             anchors.fill: parent
@@ -261,6 +263,14 @@ SplitView {
             icon: StandardIcon.Critical
         }
 
+        Timer {
+            id: modelLoadingDelayTimer
+            interval: 1000
+            onTriggered: {
+                root.countOnStartUp = messageListDelegate.count;
+            }
+        }
+
         DelegateModelGeneralized {
             id: messageListDelegate
             lessThan: [
@@ -301,7 +311,12 @@ SplitView {
                 pinnedBy: model.pinnedBy
                 gapFrom: model.gapFrom
                 gapTo: model.gapTo
-
+                Component.onCompleted: {
+                    if ((root.countOnStartUp > 0) && (root.countOnStartUp - 1) < index) {
+                        //new message, increment z order
+                        z = index;
+                    }
+                }
                 // This is used in order to have access to the previous message and determine the timestamp
                 // we can't rely on the index because the sequence of messages is not ordered on the nim side
                 prevMessageIndex: {
@@ -321,6 +336,9 @@ SplitView {
                 scrollToBottom: chatLogView.scrollToBottom
                 timeout: model.timeout
             }
+            Component.onCompleted: {
+                modelLoadingDelayTimer.start();
+            }
         }
     }
 
@@ -343,9 +361,6 @@ SplitView {
         id: userListComponent
         UserList { }
     }
-    
-
-    
 }
 
 /*##^##