feat(StatusListItem): scroll feature added if list of tags exceeds component width

ui/StatusQ/sandbox/controls/ListItems.qml

@@ -342,16 +342,37 @@ CExPynn1gWf9bx498P7/nzPcxEzGExhBdJGYihtAYQlO+tUZvqrPbqeudo5iJGEJjCE15a3VtodH3q2I
     StatusListItem {
         title: "List Item with Inline Tags"
         icon.isLetterIdenticon: true
-        tagsModel : 2
+        tagsModel: ListModel{
+            ListElement {
+                name: "helloworld.eth"
+                emoji: "😁"
+            }
+            ListElement {
+                name: "account1"
+                emoji: "😁"
+            }
+            ListElement {
+                name: "account2"
+                emoji: "😁"
+            }
+            ListElement {
+                name: "account3"
+                emoji: "😁"
+            }
+            ListElement {
+                name: "account4"
+                emoji: "😁"
+            }
+        }
         tagsDelegate: StatusListItemTag {
             color: "blue"
             height: 24
             radius: 6
             closeButtonVisible: false
-            icon.emoji: "😁"
+            icon.emoji: model.emoji
             icon.emojiSize: Emoji.size.verySmall
             icon.isLetterIdenticon: true
-            title: "helloworld.eth"
+            title: model.name
             titleText.font.pixelSize: 12
             titleText.color: Theme.palette.indirectColor1
         }

ui/StatusQ/src/StatusQ/Components/StatusListItem.qml

@@ -30,7 +30,7 @@ Rectangle {
     property list<Item> components
     property var bottomModel: []
     property Component bottomDelegate
-    property var tagsModel: []
+    property alias tagsModel: tagsRepeater.model
     property Component tagsDelegate
     property bool loading: false
     property bool loadingFailed: false
@@ -317,16 +317,24 @@ Rectangle {
                 implicitHeight: visible ? 22 : 0
             }
 
-            Row {
-                id: statusListItemTagsSlotInline
+            ScrollView {
+                visible: tagsRepeater.count > 0
                 anchors.top: statusListItemTertiaryTitle.bottom
+                anchors.topMargin: visible? 8 : 0
                 width: parent.width
-                spacing: 10
+                height: visible? contentHeight + 12 : contentHeight
                 clip: true
 
-                Repeater {
-                    model: tagsModel
-                    delegate: tagsDelegate
+                ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+
+                Row {
+                    id: statusListItemTagsSlotInline
+                    spacing: 10
+
+                    Repeater {
+                        id: tagsRepeater
+                        delegate: tagsDelegate
+                    }
                 }
             }
         }