fix(CreateCategoryPopup): ensure delete button and name input stay in viewport

There are a few issues with the popup's content when there are many channels in a community:

1. Channel items belonging to other categories would still take space in the list
1. Due to the longer list of channels, the delete button wouldn't be fully visible (scrolling down
   helps here)
2. Scrolling down is hard because the `ListView` in use is `interactive`
3. Even when `interactive` is set to false, one would scroll the name input out of the viewport.

To solve these, this commit rearchitects the popup's content such that:

1. The name input is always static and in place
2. The scrollview starts with the channel list and ends with the channel list
3. The delete button is positioned below the scrollview
4. The scrollview has a max height of 300 so that the popup doesn't grow too big
5. Invisible channel items won't have a height anymore

The result is that the middle section of the popup becomes scrollable in case there's many
channel items, while both, the name input and the delete button stay in the viewport.

Fixes #3013

ui/app/AppLayouts/Chat/CommunityComponents/CreateCategoryPopup.qml

@@ -48,31 +48,11 @@ StatusModal {
             //% "New category"
             qsTrId("new-category")
 
-    content: ScrollView {
-        id: scrollView
+    content: Column {
                 
         width: popup.width
-        height: Math.min(content.height, 432)
-
-        property ScrollBar vScrollBar: ScrollBar.vertical
         property alias categoryName: nameInput
 
-        contentHeight: content.height
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        clip: true
-
-        function scrollBackUp() {
-            vScrollBar.setPosition(0)
-        }
-
-        Column {
-            id: content
-            width: parent.width
-
-            StatusModalDivider {
-                bottomPadding: 8
-            }
-
         Item {
             width: parent.width
             height: 76
@@ -103,7 +83,30 @@ StatusModal {
             bottomPadding: 8
         }
 
+        ScrollView {
+            id: scrollView
+
+            width: popup.width
+            height: Math.min(content.height, 300)
+            anchors.horizontalCenter: parent.horizontalCenter
+
+            property ScrollBar vScrollBar: ScrollBar.vertical
+
+            contentHeight: content.height
+            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+            clip: true
+
+            function scrollBackUp() {
+                vScrollBar.setPosition(0)
+            }
+
             Item {
+                id: content
+                width: parent.width
+                height: channelsLabel.height + communityChannelList.height
+
+                Item {
+                    id: channelsLabel
                     anchors.horizontalCenter: parent.horizontalCenter
                     width: parent.width - 32
                     height: 34
@@ -119,18 +122,20 @@ StatusModal {
 
                 ListView {
                     id: communityChannelList
+
+                    anchors.top: channelsLabel.bottom
                     height: childrenRect.height
+                    width: parent.width
                     model: chatsModel.communities.activeCommunity.chats
-                anchors.left: parent.left
-                anchors.right: parent.right
+                    interactive: false
+                    clip: true
 
                     delegate: StatusListItem {
                         anchors.horizontalCenter: parent.horizontalCenter
-                    width: parent.width - 32
                         visible: popup.isEdit ? 
                             model.categoryId === popup.categoryId || model.categoryId === "" : 
                             model.categoryId === ""
-
+                        height: visible ? implicitHeight : 0
                         title: "#" + model.name
                         icon.isLetterIdenticon: true
                         icon.background.color: model.color
@@ -156,6 +161,8 @@ StatusModal {
                         ]
                     }
                 }
+            }
+        }
 
         StatusModalDivider {
             visible: deleteCategoryButton.visible
@@ -183,8 +190,9 @@ StatusModal {
             }
         }
 
-            StatusModalDivider {
-                topPadding: 8
+        Item {
+            height: 8
+            width: parent.width
         }
 
         Component {
@@ -211,7 +219,6 @@ StatusModal {
             }
         }
     }
-    }
 
     rightButtons: [
         StatusButton {