fix(StatusListItem): ensure title area wraps text

ui/StatusQ/sandbox/ListItems.qml

@@ -152,6 +152,16 @@ GridLayout {
         statusListItemTitle.font.weight: Font.Bold
     }
 
+    StatusListItem {
+        title: "Title"
+        subTitle: "Super long description that causes a multiline paragraph and makes the size of the component grow. Let's see how it behaves."
+        tertiaryTitle: "Tertiary title"
+        icon.name: "info"
+
+        statusListItemTitle.font.pixelSize: 17
+        statusListItemTitle.font.weight: Font.Bold
+    }
+
     StatusListItem {
         title: "Title"
         subTitle: "Subtitle"

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

@@ -68,6 +68,8 @@ Rectangle {
     property int type: StatusListItem.Type.Primary
 
     property alias sensor: sensor
+
+    property alias statusListItemIcon: iconOrImage
     property alias statusListItemTitle: statusListItemTitle
     property alias statusListItemSubTitle: statusListItemSubTitle
     property alias statusListItemTertiaryTitle: statusListItemTertiaryTitle
@@ -95,7 +97,8 @@ Rectangle {
             id: iconOrImage
             anchors.left: parent.left
             anchors.leftMargin: statusListItem.leftPadding
-            anchors.verticalCenter: parent.verticalCenter
+            anchors.top: parent.top
+            anchors.topMargin: 12
             sourceComponent: {
                 if (statusListItem.icon.isLetterIdenticon) {
                     return statusLetterIdenticon
@@ -148,7 +151,10 @@ Rectangle {
         Item {
             id: statusListItemTitleArea
             anchors.left: iconOrImage.active ? iconOrImage.right : parent.left
+            anchors.right: statusListItemLabel.visible ?
+                statusListItemLabel.left : statusListItemComponentsSlot.left
             anchors.leftMargin: statusListItem.leftPadding
+            anchors.rightMargin: statusListItem.rightPadding
             anchors.verticalCenter: parent.verticalCenter
             height: statusListItemTitle.height + 
               (statusListItemSubTitle.visible ? statusListItemSubTitle.height : 0) +
@@ -157,7 +163,9 @@ Rectangle {
             StatusBaseText {
                 id: statusListItemTitle
                 text: statusListItem.title
+                width: parent.width
                 font.pixelSize: 15
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
                 color: {
                   switch (statusListItem.type) {
                       case StatusListItem.Type.Primary:
@@ -173,24 +181,28 @@ Rectangle {
             StatusBaseText {
                 id: statusListItemSubTitle
                 anchors.top: statusListItemTitle.bottom
-
+                width: parent.width
                 text: statusListItem.subTitle
                 font.pixelSize: 15
                 color: !statusListItem.tertiaryTitle ? Theme.palette.baseColor1 : Theme.palette.directColor1
                 visible: !!statusListItem.subTitle
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
             }
 
             StatusBaseText {
                 id: statusListItemTertiaryTitle
                 anchors.top: statusListItemSubTitle.bottom
+                width: parent.width
                 text: statusListItem.tertiaryTitle
                 color: Theme.palette.baseColor1
                 font.pixelSize: 13
                 visible: !!statusListItem.tertiaryTitle
+                wrapMode: Text.WrapAtWordBoundaryOrAnywhere
             }
         }
 
         StatusBaseText {
+            id: statusListItemLabel
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: statusListItemComponentsSlot.left
             anchors.rightMargin: statusListItemComponentsSlot.width > 0 ? 10 : 0

ui/StatusQ/src/StatusQ/Components/StatusNavigationListItem.qml

@@ -17,6 +17,7 @@ StatusListItem {
     icon.background.height: 20
     icon.background.color: "transparent"
 
+    statusListItemIcon.anchors.topMargin: 14
 
     color: {
         if (selected) {