Fix(desktopapp): adding scrollview to storybook

Cleaned up binding loop warnings related to
ScrollView and added StatusScrollView in
storybook

As part of #8864

storybook/PagesModel.qml

@@ -97,6 +97,10 @@ ListModel {
         title: "StatusChatListAndCategories"
         section: "Components"
     }
+    ListElement {
+        title: "StatusScrollView"
+        section: "Components"
+    }
     ListElement {
          title: "BrowserSettings"
          section: "Settings"

storybook/pages/StatusScrollViewPage.qml

@@ -0,0 +1,50 @@
+import QtQuick 2.14
+import QtQuick.Controls 2.14
+import QtQuick.Layouts 1.14
+import StatusQ.Core 0.1
+
+import Storybook 1.0
+import Models 1.0
+import utils 1.0
+
+SplitView {
+    id: root
+
+    Logs { id: logs }
+
+    SplitView {
+        orientation: Qt.Vertical
+        SplitView.fillWidth: true
+
+        Loader {
+            SplitView.fillWidth: true
+            SplitView.fillHeight: true
+            sourceComponent: StatusScrollView {
+                anchors.fill: parent
+                anchors.margins: 8
+                contentWidth: parent.width
+                contentHeight: rect.height
+                Rectangle {
+                    id: rect
+                    width: 300
+                    height: 800
+                    color: Qt.rgba(Math.random(), Math.random(), Math.random(), 255)
+                }
+            }
+        }
+
+        LogsAndControlsPanel {
+            id: logsAndControlsPanel
+
+            SplitView.minimumHeight: 100
+            SplitView.preferredHeight: 200
+
+            logsView.logText: logs.logText
+        }
+    }
+
+    Pane {
+         SplitView.minimumWidth: 300
+         SplitView.preferredWidth: 300
+     }
+}

ui/StatusQ/src/StatusQ/Core/StatusScrollView.qml

@@ -49,8 +49,6 @@ Flickable {
     rightMargin: rightPadding
     contentWidth: contentItem.childrenRect.width
     contentHeight: contentItem.childrenRect.height
-    implicitWidth: contentWidth + leftPadding + rightPadding
-    implicitHeight: contentHeight + topPadding + bottomPadding
     boundsBehavior: Flickable.StopAtBounds
     maximumFlickVelocity: 2000
     synchronousDrag: true

ui/StatusQ/src/StatusQ/Popups/StatusColorDialog.qml

@@ -36,6 +36,7 @@ StatusModal {
     contentItem: StatusScrollView {
         id: scroll
         width: parent.width
+        height: parent.height
         topPadding: 30
         leftPadding: 20
         rightPadding: 20

ui/app/AppLayouts/Chat/controls/community/CommunityBannerPicker.qml

@@ -23,7 +23,7 @@ Item {
     property alias cropRect: editor.cropRect
     property string imageData
 
-    implicitHeight: layout.implicitHeight
+    implicitHeight: layout.childrenRect.height
 
     ColumnLayout {
         id: layout

ui/app/AppLayouts/Chat/controls/community/CommunityLogoPicker.qml

@@ -23,8 +23,7 @@ Item {
     property alias cropRect: editor.cropRect
     property string imageData
 
-    implicitWidth: layout.implicitWidth
+    implicitHeight: layout.childrenRect.height
-    implicitHeight: layout.implicitHeight
 
     ColumnLayout {
         id: layout

ui/app/AppLayouts/Chat/controls/community/CommunityOptions.qml

@@ -6,7 +6,7 @@ import StatusQ.Core.Theme 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 
-ColumnLayout {
+Column {
     id: root
 
     property alias archiveSupportEnabled: archiveSupportToggle.checked
@@ -26,8 +26,8 @@ ColumnLayout {
     RowLayout {
         id: archiveSupport
 
-        Layout.fillWidth: true
+        width: parent.width
-        Layout.preferredHeight: d.optionHeight
+        height: d.optionHeight
 
         StatusBaseText {
             Layout.fillWidth: true
@@ -44,8 +44,8 @@ ColumnLayout {
     }
 
     RowLayout {
-        Layout.fillWidth: true
+        width: parent.width
-        Layout.preferredHeight: d.optionHeight
+        height: d.optionHeight
 
         StatusBaseText {
             Layout.fillWidth: true
@@ -61,8 +61,8 @@ ColumnLayout {
     }
 
     RowLayout {
-        Layout.fillWidth: true
+        width: parent.width
-        Layout.preferredHeight: d.optionHeight
+        height: d.optionHeight
 
         StatusBaseText {
             Layout.fillWidth: true
@@ -78,8 +78,8 @@ ColumnLayout {
     }
 
     RowLayout {
-        Layout.fillWidth: true
+        width: visible ? parent.width : 0
-        Layout.preferredHeight: d.optionHeight
+        height: visible ? d.optionHeight : 0
         visible: requestToJoinToggle.checked
 
         StatusBaseText {

ui/app/AppLayouts/Chat/controls/community/InDropdown.qml

@@ -159,6 +159,7 @@ StatusDropdown {
             id: scrollView
 
             Layout.fillWidth: true
+            Layout.fillHeight: true
             Layout.bottomMargin: 9
             Layout.topMargin:
                 !root.allowChoosingEntireCommunity && !root.allowChoosingEntireCommunity ? 9 : 0

ui/app/AppLayouts/Chat/panels/communities/CommunityEditSettingsPanel.qml

@@ -25,7 +25,8 @@ StatusScrollView {
     id: root
     objectName: "communityEditPanelScrollView"
 
-    implicitHeight: layout.implicitHeight
+    implicitWidth: contentWidth
+    implicitHeight: layout.childrenRect.height
 
     property alias name: nameInput.text
     property alias description: descriptionTextInput.text
@@ -53,7 +54,7 @@ StatusScrollView {
         id: layout
 
         width: 608
-        height: childrenRect.height
+        height: parent.height
 
         spacing: 12
 
@@ -140,6 +141,7 @@ StatusScrollView {
 
         CommunityOptions {
             id: options
+            Layout.fillWidth: true
         }
 
         StatusModalDivider {

ui/app/AppLayouts/CommunitiesPortal/controls/CommunityColorPicker.qml

@@ -18,6 +18,7 @@ ColumnLayout {
 
     spacing: 8
 
+    implicitHeight: childrenRect.height
     StatusBaseText {
         text: qsTr("Community color")
         font.pixelSize: 15

ui/app/AppLayouts/CommunitiesPortal/controls/CommunityTagsPicker.qml

@@ -29,6 +29,7 @@ ColumnLayout {
         }
     }
 
+    implicitHeight: childrenRect.height
     spacing: 8
 
     QtObject {

ui/imports/shared/status/StatusStickersPopup.qml

@@ -268,6 +268,7 @@ Popup {
             StatusScrollView {
                 height: 40
                 Layout.fillWidth: true
+                Layout.fillHeight: true
                 ScrollBar.vertical.policy: ScrollBar.AlwaysOff
 
                 RowLayout {