feat(@desktop): Fix twitchy scrolling issues

Close #6187

ui/app/AppLayouts/Browser/panels/DownloadBar.qml

@@ -1,10 +1,11 @@
 import QtQuick 2.1
 import QtGraphicalEffects 1.13
 
-import utils 1.0
+import StatusQ.Core 0.1
-
 import StatusQ.Controls 0.1
 
+import utils 1.0
+
 import "../controls"
 
 Rectangle {
@@ -35,7 +36,7 @@ Rectangle {
         height: listView.height
         clip: true
 
-        ListView {
+        StatusListView {
             id: listView
             orientation: ListView.Horizontal
             model: downloadsModel

ui/app/AppLayouts/Browser/panels/DownloadView.qml

@@ -1,5 +1,7 @@
 import QtQuick 2.1
 
+import StatusQ.Core 0.1
+
 import utils 1.0
 
 import "../controls"
@@ -15,7 +17,7 @@ import "../controls"
 
     color: Style.current.background
 
-    ListView {
+    StatusListView {
         id: listView
         anchors {
             topMargin: Style.current.bigPadding

ui/app/AppLayouts/Browser/panels/FavoritesBar.qml

@@ -1,10 +1,11 @@
 import QtQuick 2.13
 import QtQuick.Layouts 1.13
 
-import utils 1.0
+import StatusQ.Core 0.1
-
 import StatusQ.Controls 0.1
 
+import utils 1.0
+
 RowLayout {
     id: favoritesBar
 
@@ -17,15 +18,12 @@ RowLayout {
     spacing: 0
     height: 38
 
-    ListView {
+    StatusListView {
         id: bookmarkList
         spacing: Style.current.halfPadding
         orientation : ListView.Horizontal
-        height: parent.height
+        Layout.fillWidth: true
-        clip: true
+        Layout.fillHeight: true
-        Layout.alignment: Qt.AlignLeft | Qt.AlignTop
-        width: parent.width
-        boundsBehavior: Flickable.StopAtBounds
         delegate: StatusFlatButton {
             id: favoriteBtn
             height: 32

ui/app/AppLayouts/Chat/panels/ContactListPanel.qml

@@ -7,24 +7,19 @@ import StatusQ.Controls 0.1
 
 import utils 1.0
 
-StatusScrollView {
+StatusListView {
     id: contactListPanel
 
-    property alias model: groupMembers.model
     property string searchString
     property bool selectMode: true
     property var onItemChecked
 
     property var selectedPubKeys: []
 
-    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-    ScrollBar.vertical.policy: groupMembers.contentHeight > groupMembers.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
-
-    ListView {
-        id: groupMembers
-        anchors.fill: parent
     spacing: 0
-        clip: true
+
+    ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+
     delegate: StatusListItem {
         id: contactDelegate
 
@@ -72,4 +67,3 @@ StatusScrollView {
         }
     }
 }
-}

ui/app/AppLayouts/Chat/panels/GroupChatPanel.qml

@@ -1,6 +1,7 @@
 import QtQuick 2.13
 import QtQuick.Layouts 1.13
 
+import StatusQ.Core 0.1
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 
@@ -43,7 +44,7 @@ RowLayout {
          }
      }
 
-     ListView {
+     StatusListView {
          id: groupUsersModelListView
          visible: false
          model: root.chatContentModule.usersModule.model
@@ -55,7 +56,7 @@ RowLayout {
          }
      }
 
-     ListView {
+     StatusListView {
          id: contactsModelListView
          visible: false
          model: root.rootStore.contactsModel

ui/app/AppLayouts/Chat/panels/SuggestionBoxPanel.qml

@@ -22,12 +22,12 @@ import QtQuick.Controls 2.13
 import QtGraphicalEffects 1.13
 import QtQml.Models 2.13
 
-import utils 1.0
+import StatusQ.Core 0.1
-import shared.controls 1.0
-
 import StatusQ.Components 0.1
 
+import utils 1.0
 import shared 1.0
+import shared.controls 1.0
 import shared.panels 1.0
 import shared.controls.chat 1.0
 
@@ -117,7 +117,7 @@ Rectangle {
         cursorPosition: container.cursorPosition
     }
 
-    ListView {
+    StatusListView {
         id: listView
         model: mentionsListDelegate
         keyNavigationEnabled: true
@@ -126,7 +126,6 @@ Rectangle {
         anchors.leftMargin: Style.current.halfPadding
         anchors.rightMargin: Style.current.halfPadding
         anchors.bottomMargin: Style.current.halfPadding
-        clip: true
         Keys.priority: Keys.AfterItem
         Keys.forwardTo: container.inputField
         Keys.onPressed: {

ui/app/AppLayouts/Chat/panels/SuggestionFilterPanel.qml

@@ -1,6 +1,8 @@
 import QtQuick 2.13
 import utils 1.0
 
+import StatusQ.Core 0.1
+
 Item {
     id: suggestionsPanelRoot
     property alias model: filterModel
@@ -17,7 +19,7 @@ Item {
     onSourceModelChanged: invalidateFilter()
     Component.onCompleted: invalidateFilter()
 
-    ListView {
+    StatusListView {
         // This is a fake list (invisible), used just for the sake of accessing items of the `sourceModel`
         // without exposing explicit methods from the model which would return item detail.
         // In general the whole thing about preparing/displaying suggestion panel and list there should

ui/app/AppLayouts/Chat/panels/UserListPanel.qml

@@ -1,16 +1,16 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
-import StatusQ.Components 0.1
-import shared 1.0
-import shared.panels 1.0
-import shared.status 1.0
-
-import utils 1.0
-
-import "../controls"
 
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+
+import shared 1.0
+import shared.panels 1.0
+import shared.status 1.0
+import utils 1.0
+
+import "../controls"
 
 Item {
     id: root
@@ -39,12 +39,8 @@ Item {
         text: root.label
     }
 
-    ListView {
+    StatusListView {
         id: userListView
-        clip: true
-        ScrollBar.vertical: ScrollBar {
-            policy: ScrollBar.AsNeeded
-        }
         anchors {
             top: titleText.bottom
             topMargin: Style.current.padding
@@ -53,7 +49,7 @@ Item {
             bottom: parent.bottom
             bottomMargin: Style.current.bigPadding
         }
-        boundsBehavior: Flickable.StopAtBounds
+
         model: usersModule.model
         section.property: "onlineStatus"
         section.delegate: (root.width > 58) ? sectionDelegateComponent : null

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

@@ -51,7 +51,7 @@ StatusScrollView {
     ColumnLayout {
         id: layout
 
-        width: root.width
+        width: root.availableWidth
         spacing: 12
 
         CommunityNameInput {

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

@@ -78,14 +78,13 @@ SettingsPageLayout {
             color: Theme.palette.baseColor1
         }
 
-        ListView {
+        StatusListView {
             id: memberList
 
             Layout.fillWidth: true
             Layout.fillHeight: true
 
             model: root.membersModel
-            clip: true
 
             // TODO: use StatusMemberListItem (it does not behave correctly right now)
             delegate: StatusListItem {

ui/app/AppLayouts/Chat/popups/ContactRequestsPopup.qml

@@ -3,10 +3,10 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 
-import utils 1.0
+import StatusQ.Core 0.1
-
 import StatusQ.Controls 0.1
 
+import utils 1.0
 import shared.popups 1.0
 
 import "../panels"
@@ -19,7 +19,7 @@ ModalPopup {
 
     title: qsTr("Contact requests")
 
-    ListView {
+    StatusListView {
         id: contactList
 
         anchors.fill: parent
@@ -27,7 +27,6 @@ ModalPopup {
         anchors.rightMargin: -Style.current.halfPadding
 
         model: popup.store.contactRequestsModel
-        clip: true
 
         delegate: ContactRequestPanel {
             contactPubKey: model.pubKey

ui/app/AppLayouts/Chat/popups/GroupInfoPopup.qml

@@ -193,11 +193,10 @@ StatusModal {
             visible: pinnedMessagesBtn.visible
         }
 
-        ListView {
+        StatusListView {
             id: memberList
             Layout.fillWidth: true
             Layout.fillHeight: true
-            clip: true
             model: popup.chatContentModule.usersModule.model
             delegate: StatusListItem {
                 id: contactRow

ui/app/AppLayouts/Chat/popups/PinnedMessagesPopup.qml

@@ -1,6 +1,9 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.3
 
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1 as StatusQControls
+
 import utils 1.0
 import shared 1.0
 import shared.views 1.0
@@ -13,8 +16,6 @@ import "../panels"
 //TODO remove or make view?
 import "../views"
 
-import StatusQ.Controls 0.1 as StatusQControls
-
 // TODO: replace with StatusMOdal
 ModalPopup {
     id: popup
@@ -83,7 +84,7 @@ ModalPopup {
             id: pinButtonGroup
         }
 
-        ListView {
+        StatusListView {
             id: pinnedMessageListView
             model: popup.pinnedMessagesModel
             height: parent.height
@@ -94,7 +95,6 @@ ModalPopup {
             topMargin: Style.current.halfPadding
             anchors.top: parent.top
             anchors.topMargin: -Style.current.halfPadding
-            clip: true
 
             delegate: Item {
                 id: messageDelegate

ui/app/AppLayouts/Chat/popups/community/CommunitiesPopup.qml

@@ -8,7 +8,6 @@ import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 
-
 import utils 1.0
 import shared 1.0
 
@@ -76,11 +75,10 @@ StatusModal {
                 bottomPadding: 8
                 height: 400
 
-                ListView {
+                StatusListView {
                     anchors.fill: parent
                     model: communitiesDelegateModel
                     spacing: 4
-                    clip: true
                     id: communitiesList
 
                     section.property: "name"

ui/app/AppLayouts/Chat/popups/community/CommunityDetailPopup.qml

@@ -8,7 +8,6 @@ import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 import StatusQ.Popups 0.1
 
-
 import utils 1.0
 
 StatusModal {
@@ -115,11 +114,10 @@ StatusModal {
             height: 300
             ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
 
-            ListView {
+            StatusListView {
                 id: chatList
                 anchors.fill: parent
                 model: community.chats
-                boundsBehavior: Flickable.StopAtBounds
                 delegate: StatusListItem {
                     anchors.horizontalCenter: parent.horizontalCenter
                     title: "#" + model.name

ui/app/AppLayouts/Chat/popups/community/CreateCategoryPopup.qml

@@ -106,7 +106,7 @@ StatusModal {
                     }
                 }
 
-                ListView {
+                StatusListView {
                     id: communityChannelList
 
                     anchors.top: channelsLabel.bottom
@@ -114,7 +114,6 @@ StatusModal {
                     width: parent.width
                     model: isEdit ? root.store.chatCommunitySectionModule.editCategoryChannelsModel : root.store.chatCommunitySectionModule.model
                     interactive: false
-                    clip: true
 
                     delegate: StatusListItem {
                         anchors.horizontalCenter: parent.horizontalCenter

ui/app/AppLayouts/Chat/popups/community/MembershipRequestsPopup.qml

@@ -7,7 +7,6 @@ import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Popups 0.1
 
-
 import utils 1.0
 import shared 1.0
 
@@ -50,7 +49,7 @@ StatusModal {
             bottomPadding: 8
             height: 300
 
-            ListView {
+            StatusListView {
                 id: membershipRequestList
                 anchors.fill: parent
                 model: popup.communityData.pendingRequestsToJoin

ui/app/AppLayouts/Chat/views/ChatMessagesView.qml

@@ -6,6 +6,10 @@ import QtQml.Models 2.13
 import QtGraphicalEffects 1.13
 import QtQuick.Dialogs 1.3
 
+import StatusQ.Core 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+
 import utils 1.0
 import shared 1.0
 import shared.views 1.0
@@ -14,8 +18,6 @@ import shared.popups 1.0
 import shared.status 1.0
 import shared.controls 1.0
 import shared.views.chat 1.0
-import StatusQ.Core 0.1
-import StatusQ.Components 0.1
 
 import "../controls"
 
@@ -93,15 +95,13 @@ Item {
         }
     }
 
-    ListView {
+    StatusListView {
         id: chatLogView
         anchors.top: loadingMessagesIndicator.bottom
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.right: parent.right
         spacing: 0
-        boundsBehavior: Flickable.StopAtBounds
-        clip: true
         verticalLayoutDirection: ListView.BottomToTop
 
         // This header and Connections is to create an invisible padding so that the chat identifier is at the top
@@ -124,7 +124,7 @@ Item {
             }
         }
 
-        ScrollBar.vertical: ScrollBar {
+        ScrollBar.vertical: StatusScrollBar {
             visible: chatLogView.visibleArea.heightRatio < 1
         }
 

ui/app/AppLayouts/Chat/views/CommunityColumnView.qml

@@ -101,7 +101,7 @@ Item {
     }
 
     StatusScrollView {
-        id: chatGroupsContainer
+        id: scrollView
         anchors.top: membershipRequests.bottom
         anchors.topMargin: Style.current.padding
         anchors.bottom: createChatOrCommunity.top
@@ -362,7 +362,7 @@ Item {
 
         Column {
             id: bannerColumn
-            width: parent.width
+            width: scrollView.availableWidth
             anchors.top: communityChatListAndCategories.bottom
             anchors.topMargin: Style.current.padding
             spacing: Style.current.bigPadding

ui/app/AppLayouts/Chat/views/CommunitySettingsView.qml

@@ -68,7 +68,7 @@ StatusAppTwoPanelLayout {
             text: qsTr("Settings")
         }
 
-        ListView  {
+        StatusListView {
             id: listView
 
             Layout.fillWidth: true

ui/app/AppLayouts/Chat/views/ContactsColumnView.qml

@@ -2,6 +2,11 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Controls 0.1
+import StatusQ.Components 0.1
+import StatusQ.Popups 0.1
 
 import utils 1.0
 import shared 1.0
@@ -11,12 +16,6 @@ import "../panels"
 import "../popups"
 import "../popups/community"
 
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-import StatusQ.Components 0.1
-import StatusQ.Popups 0.1
-
 Item {
     id: root
     width: 304
@@ -139,15 +138,13 @@ Item {
 
         // chat list
         StatusScrollView {
-            id: scrollView
+            id: scroll
             Layout.fillWidth: true
             Layout.fillHeight: true
 
-            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-
             StatusChatList {
                 id: channelList
-                width: scrollView.availableWidth
+                width: scroll.availableWidth
                 model: root.chatSectionModule.model
                 highlightItem: !root.store.openCreateChat
                 onChatItemSelected: {
@@ -234,15 +231,6 @@ Item {
                     }
                 }
             }
-
-            EmptyViewPanel {
-                id: emptyViewAndSuggestions
-                visible: !localAccountSensitiveSettings.hideChannelSuggestions
-                anchors.top: channelList.bottom
-                anchors.topMargin: Style.current.padding
-                rootStore: root.store
-                onSuggestedMessageClicked: chatSectionModule.createPublicChat(channel)
-            }
         }
     }
 

ui/app/AppLayouts/Chat/views/CreateChatView.qml

@@ -25,7 +25,7 @@ Page {
         root.rootStore.openCreateChat = false;
     }
 
-    ListView {
+    StatusListView {
         id: contactsModelListView
         anchors.left: parent.left
         anchors.right: parent.right

ui/app/AppLayouts/CommunitiesPortal/popups/CreateCommunityPopup.qml

@@ -46,7 +46,7 @@ StatusStackModal {
 
             ColumnLayout {
                 id: generalViewLayout
-                width: generalView.width
+                width: generalView.availableWidth
                 spacing: 12
 
                 CommunityNameInput {

ui/app/AppLayouts/Onboarding/panels/AccountListPanel.qml

@@ -1,11 +1,13 @@
 import QtQuick 2.13
 import QtQuick.Controls 2.13
 
-import "../controls"
+import StatusQ.Core 0.1
 
 import utils 1.0
 
-ListView {
+import "../controls"
+
+StatusListView {
     id: accountsView
 
     property var isSelected: function () {}

ui/app/AppLayouts/Onboarding/views/InsertDetailsView.qml

@@ -9,13 +9,12 @@ import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Popups 0.1
 
-
 import shared.panels 1.0
 import shared 1.0
 import shared.popups 1.0
-
-import utils 1.0
 import shared.controls 1.0
+import utils 1.0
+
 import "../popups"
 import "../stores"
 import "../shared"
@@ -40,7 +39,7 @@ Item {
 
     Loader {
         active: !OnboardingStore.onboardingModuleInst.importedAccountPubKey
-        sourceComponent: ListView {
+        sourceComponent: StatusListView {
             model: OnboardingStore.onboardingModuleInst.accountsModel
             delegate: Item {
                 Component.onCompleted: {

ui/app/AppLayouts/Profile/panels/CommunitiesListPanel.qml

@@ -9,7 +9,7 @@ import StatusQ.Popups 0.1
 
 import utils 1.0
 
-ListView {
+StatusListView {
     id: root
 
     property bool hasAddedContacts: false

ui/app/AppLayouts/Profile/panels/ContactsListPanel.qml

@@ -3,12 +3,14 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtQml.Models 2.13
 
+import StatusQ.Core 0.1
+
 import utils 1.0
 import shared 1.0
 import shared.popups 1.0
 import shared.panels 1.0
-import "../../Chat/popups"
 
+import "../../Chat/popups"
 import "."
 
 Item {
@@ -89,14 +91,13 @@ Item {
         delegate: contactPanelComponent
     }
 
-    ListView {
+    StatusListView {
         id: contactsList
         anchors.top: title.bottom
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom
         interactive: false
-        clip: true
         ScrollBar.vertical: ScrollBar {
             policy: contactListRoot.scrollbarOn ? ScrollBar.AlwaysOn : ScrollBar.AsNeeded
         }

ui/app/AppLayouts/Profile/popups/ENSPopup.qml

@@ -55,11 +55,10 @@ ModalPopup {
         ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
         ScrollBar.vertical.policy: ensNames.contentHeight > ensNames.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
 
-        ListView {
+        StatusListView {
             anchors.fill: parent
             model: root.ensUsernamesStore.ensUsernamesModel
             spacing: 0
-            clip: true
             id: ensNames
             delegate: RadioDelegate {
                 id: radioDelegate

ui/app/AppLayouts/Profile/popups/MutedChatsModal.qml

@@ -3,13 +3,12 @@ import QtQuick.Controls 2.13
 import QtGraphicalEffects 1.13
 import QtQuick.Layouts 1.13
 
-import utils 1.0
-
 import StatusQ.Controls 0.1
 import StatusQ.Components 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Core 0.1
 
+import utils 1.0
 import shared 1.0
 import shared.panels 1.0
 import shared.popups 1.0
@@ -28,7 +27,7 @@ ModalPopup {
         root.destroy()
     }
 
-    ListView {
+    StatusListView {
         id: mutedChatsList
         anchors.fill: parent
         model: root.model

ui/app/AppLayouts/Profile/popups/backupseed/BackupSeedStepBase.qml

@@ -24,7 +24,7 @@ StatusScrollView {
 
     ColumnLayout {
         id: column
-        width: parent.width
+        width: root.availableWidth
         spacing: Style.current.padding
 
         StyledText {

ui/app/AppLayouts/Profile/views/DevicesView.qml

@@ -155,7 +155,7 @@ SettingsContentBase {
                 color: Theme.palette.directColor1
             }
 
-            ListView {
+            StatusListView {
                 id: listView
                 anchors.top: deviceListLbl.bottom
                 anchors.topMargin: Style.current.padding

ui/app/AppLayouts/Profile/views/EnsListView.qml

@@ -2,18 +2,18 @@ import QtQuick 2.14
 import QtQuick.Layouts 1.3
 import QtQuick.Controls 2.14
 
-import utils 1.0
-
 import StatusQ.Core 0.1
 import StatusQ.Core.Theme 0.1
 import StatusQ.Controls 0.1
 
-import "../popups"
 import shared 1.0
 import shared.panels 1.0
 import shared.views.chat 1.0
 import shared.panels.chat 1.0
 import shared.controls.chat 1.0
+import utils 1.0
+
+import "../popups"
 
 Item {
     id: root
@@ -186,27 +186,21 @@ Item {
         }
 
         Item {
+            id: ensList
             anchors.top: usernamesLabel.bottom
             anchors.topMargin: 10
             anchors.left: parent.left
             anchors.right: parent.right
             height: 200
-            id: ensList
 
-            StatusScrollView {
+            StatusListView {
-                anchors.fill: parent
-
-                ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-                ScrollBar.vertical.policy: lvEns.contentHeight > lvEns.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
-
-                ListView {
                 id: lvEns
                 anchors.fill: parent
                 model: root.ensUsernamesStore.ensUsernamesModel
                 spacing: 10
-                    clip: true
                 delegate: ensDelegate
-                }
+
+                ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }
             }
         }
 

ui/app/AppLayouts/Profile/views/NotificationsView.qml

@@ -535,11 +535,10 @@ SettingsContentBase {
                         color: Theme.palette.baseColor1
                     }
 
-                    ListView {
+                    StatusListView {
                         Layout.preferredWidth: root.contentWidth
                         Layout.preferredHeight: 400
                         visible: root.notificationsStore.exemptionsModel.count > 0
-                        clip: true
 
                         model: root.notificationsStore.exemptionsModel
                         delegate: exemptionDelegateComponent

ui/app/AppLayouts/Profile/views/SettingsContentBase.qml

@@ -105,16 +105,12 @@ Item {
         anchors.bottom: parent.bottom
         anchors.left: parent.left
         anchors.topMargin: Style.current.bigPadding
+        padding: 0
         width: root.contentWidth
 
-        StatusScrollView {
-            id: contentFliackable
-            contentWidth: Math.max(contentLayout.implicitWidth, scrollView.width)
-            contentHeight: Math.max(contentLayout.implicitHeight, scrollView.height) + scrollView.anchors.topMargin
-
         Column {
             id: contentLayout
-                anchors.fill: parent.contentItem
+            width: scrollView.availableWidth
 
             MouseArea {
                 onClicked: root.baseAreaClicked()
@@ -140,14 +136,13 @@ Item {
             }
         }
     }
-    }
 
     SettingsDirtyToastMessage {
         id: settingsDirtyToastMessage
         anchors.bottom: scrollView.bottom
         anchors.horizontalCenter: scrollView.horizontalCenter
         active: root.dirty
-        flickable: contentFliackable
+        flickable: scrollView
         saveChangesButtonEnabled: root.saveChangesButtonEnabled
         onResetChangesClicked: root.resetChangesClicked()
         onSaveChangesClicked: root.saveChangesClicked()

ui/app/AppLayouts/Wallet/popups/CryptoServicesModal.qml

@@ -40,7 +40,7 @@ StatusModal {
                     text: qsTr("Choose a service you'd like to use to buy crypto")
                 }
 
-                ListView {
+                StatusListView {
                     anchors.top: note.bottom
                     anchors.bottom: parent.bottom
                     anchors.topMargin: Style.current.padding
@@ -49,7 +49,6 @@ StatusModal {
                     model: RootStore.cryptoRampServicesModel
                     focus: true
                     spacing: Style.current.padding
-                    clip: true
 
                     delegate: StatusListItem {
                         width: parent.width

ui/app/AppLayouts/Wallet/views/LeftTabView.qml

@@ -3,16 +3,16 @@ import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import QtGraphicalEffects 1.13
 
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+import StatusQ.Components 0.1
+import StatusQ.Controls 0.1
+
 import utils 1.0
 import shared 1.0
 import shared.panels 1.0
 import shared.controls 1.0
 
-import StatusQ.Components 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Controls 0.1
-
 import "../controls"
 import "../popups"
 import "../stores"
@@ -79,23 +79,13 @@ Rectangle {
             }
         }
 
-        ScrollView {
+        StatusListView {
+            spacing: Style.current.smallPadding
             Layout.fillWidth: true
             Layout.fillHeight: true
             Layout.topMargin: Style.current.halfPadding
+
             ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-            ScrollBar.vertical.policy: listView.contentHeight > listView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
-            clip: true
-
-            ListView {
-                id: listView
-
-                spacing: Style.current.smallPadding
-                anchors.top: parent.top
-                width: parent.width
-                height: parent.height
-                boundsBehavior: Flickable.StopAtBounds
-                clip: true
 
             delegate: StatusListItem {
                 width: ListView.view.width
@@ -135,7 +125,6 @@ Rectangle {
             model: RootStore.accounts
             // model: RootStore.exampleWalletModel
         }
-        }
 
         Item { Layout.fillHeight: true }
 

ui/app/AppLayouts/Wallet/views/SavedAddressesView.qml

@@ -225,7 +225,8 @@ Item {
         text: qsTr("No saved addresses")
     }
 
-    StatusScrollView {
+    StatusListView {
+        id: listView
         anchors.top: errorMessage.bottom
         anchors.topMargin: Style.current.padding
         anchors.bottom: parent.bottom
@@ -233,14 +234,8 @@ Item {
         anchors.right: parent.right
         anchors.left: parent.left
         visible: listView.count > 0
-
-        ListView {
-            id: listView
-            model: RootStore.savedAddresses
         spacing: 5
-            width: parent.width
+        model: RootStore.savedAddresses
-            boundsBehavior: Flickable.StopAtBounds
         delegate: delegateSavedAddress
     }
 }
-}

ui/app/AppLayouts/Wallet/views/collectibles/CollectibleDetailView.qml

@@ -67,16 +67,13 @@ StackDetailBase {
             }
         }
 
-        ListView {
+        StatusListView {
             anchors.top: collectibleImageDetails.bottom
             anchors.topMargin: 32
             anchors.bottom: parent.bottom
             anchors.bottomMargin: 20
             anchors.horizontalCenter: parent.horizontalCenter
             width: parent.width
-
-            clip: true
-            boundsBehavior: Flickable.StopAtBounds
             model: 3
             delegate: StatusExpandableItem {
                 width: parent.width

ui/app/mainui/AppMain.qml

@@ -939,7 +939,7 @@ Item {
         }
     }
 
-    ListView {
+    StatusListView {
         id: toastArea
         anchors.top: parent.top
         anchors.topMargin: 60

ui/imports/shared/status/StatusChatInput.qml

@@ -402,7 +402,8 @@ Rectangle {
     property int copyTextStart: 0
     property string copiedTextPlain: ""
     property string copiedTextFormatted: ""
-    ListView {
+
+    StatusListView {
         id: dummyContactList
         model: control.usersStore ? control.usersStore.usersModel : []
         delegate: Item {
@@ -931,6 +932,7 @@ Rectangle {
 
         StatusScrollView {
             id: scrollView
+            padding: 0
             anchors.top: parent.top
             anchors.bottom: parent.bottom
             anchors.left: profileImage.visible ? profileImage.right : parent.left

ui/imports/shared/status/StatusInputListPopup.qml

@@ -4,6 +4,8 @@ import QtGraphicalEffects 1.12
 import QtQuick.Dialogs 1.3
 import QtQuick.Layouts 1.13
 
+import StatusQ.Core 0.1
+
 import utils 1.0
 import shared 1.0
 import shared.panels 1.0
@@ -128,16 +130,14 @@ Popup {
         }
     }
 
-    ListView {
+    StatusListView {
         id: listView
         model: popup.modelList || []
         keyNavigationEnabled: true
-        Layout.fillHeight: true
         width: parent.width
         anchors.top: searchBox.bottom
         anchors.topMargin: searchBox.visible ? Style.current.smallPadding : 0
         anchors.bottom: parent.bottom
-        clip: true
 
         delegate: Rectangle {
             property variant myData: typeof modelData === "undefined" ? model : modelData

ui/imports/shared/status/StatusSearchListPopup.qml

@@ -99,7 +99,7 @@ Popup {
             onTextChanged: if (text === "") listView.currentIndex = 0
         }
 
-        ListView {
+        StatusListView {
             id: listView
 
             Layout.fillWidth: true
@@ -107,7 +107,6 @@ Popup {
 
             property bool selectByHover: false
 
-            clip: true
             highlightMoveDuration: 200
 
             delegate: Item {

ui/imports/shared/status/StatusStickersPopup.qml

@@ -233,7 +233,6 @@ Popup {
                 id: installedStickersSV
                 anchors.bottom: parent.bottom
                 height: 32
-                ScrollBar.vertical.policy: ScrollBar.AlwaysOff
 
                 RowLayout {
                     id: stickersRowLayout

ui/imports/shared/views/AssetsView.qml

@@ -15,14 +15,7 @@ Item {
 
     height: assetListView.height
 
-    StatusScrollView {
+    StatusListView {
-        anchors.fill: parent
-        Layout.fillWidth: true
-        Layout.fillHeight: true
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        ScrollBar.vertical.policy: assetListView.contentHeight > assetListView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
-
-        ListView {
         id: assetListView
         anchors.fill: parent
         model: account.assets
@@ -30,7 +23,9 @@ Item {
             locale: RootStore.locale
             currency: RootStore.currentCurrency
         }
-            boundsBehavior: Flickable.StopAtBounds
+        Layout.fillWidth: true
-        }
+        Layout.fillHeight: true
+
+        ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }
     }
 }

ui/imports/shared/views/ExistingContacts.qml

@@ -31,18 +31,11 @@ Item {
         return parts.some(p => p.startsWith(filter))
     }
 
-
+    StatusListView {
-    StatusScrollView {
+        id: contactListView
-        anchors.fill: parent
-
-        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
-        ScrollBar.vertical.policy: contactListView.contentHeight > contactListView.height ? ScrollBar.AlwaysOn : ScrollBar.AlwaysOff
-
-        ListView {
         anchors.fill: parent
         spacing: 0
-            clip: true
+
-            id: contactListView
         model: root.contactsStore.myContactsModel
         delegate: Contact {
             showCheckbox: root.showCheckbox
@@ -66,7 +59,8 @@ Item {
                 root.contactClicked(model)
             }
         }
-        }
+
+        ScrollBar.vertical: ScrollBar { policy: ScrollBar.AsNeeded }
     }
 }
 

ui/imports/shared/views/HistoryView.qml

@@ -2,11 +2,12 @@ import QtQuick 2.13
 import QtQuick.Controls 2.1
 import QtQuick.Layouts 1.3
 
-import utils 1.0
+import StatusQ.Core 0.1
-
 import StatusQ.Components 0.1
 import StatusQ.Controls 0.1
 
+import utils 1.0
+
 import "../panels"
 import "../popups"
 import "../stores"
@@ -68,15 +69,13 @@ Item {
         font.pixelSize: Style.current.primaryTextFontSize
     }
 
-    ListView {
+    StatusListView {
         id: transactionListRoot
         anchors.top: noTxs.bottom
         anchors.topMargin: Style.current.padding
         anchors.bottom: loadMoreButton.top
         anchors.bottomMargin: Style.current.padding
         width: parent.width
-        clip: true
-        boundsBehavior: Flickable.StopAtBounds
         model: RootStore.historyTransactions
         delegate: TransactionDelegate {
             tokens: RootStore.tokens

ui/imports/shared/views/TabAddressSelectorView.qml

@@ -62,7 +62,7 @@ Item {
             color: "transparent"
             radius: 8
 
-            ListView {
+            StatusListView {
                 id: savedAddresses
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
@@ -70,10 +70,8 @@ Item {
                 height: Math.min(288, savedAddresses.contentHeight)
 
                 model: root.store.savedAddressesModel
-                clip: true
                 header:  savedAddresses.count > 0 ? search : nothingInList
                 headerPositioning: ListView.OverlayHeader
-                boundsBehavior: Flickable.StopAtBounds
                 delegate: StatusListItem {
                     width: visible ? parent.width:  0
                     height: visible ? 64 : 0
@@ -120,16 +118,13 @@ Item {
             color: "transparent"
             radius: 8
 
-            ListView {
+            StatusListView {
                 id: myAccounts
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 width: parent.width
                 height: Math.min(288, myAccounts.contentHeight)
 
-                boundsBehavior: Flickable.StopAtBounds
-                clip: true
-
                 delegate: StatusListItem {
                     width: visible ? parent.width:  0
                     height: visible ? 64 : 0
@@ -155,16 +150,13 @@ Item {
             color: "transparent"
             radius: 8
 
-            ListView {
+            StatusListView {
                 id: recents
                 anchors.horizontalCenter: parent.horizontalCenter
                 anchors.top: parent.top
                 width: parent.width
                 height: Math.min(288, recents.contentHeight)
 
-                boundsBehavior: Flickable.StopAtBounds
-                clip: true
-
                 header: StatusBaseText {
                     font.pixelSize: 15
                     color: Theme.palette.directColor1