fix: ‘Share community’ URL is unnecessarily ellipsed

- set the width on title/subtitle
- put the subtitle with its optional icon into a Row
- elide title/subtitle
- update Sandbox

Fixes #9701

ui/StatusQ/sandbox/controls/ListItems.qml

@@ -453,9 +453,10 @@ ColumnLayout {
 
     StatusDescriptionListItem {
         title: "Title"
-        subTitle: "Subtitle"
+        subTitle: "Very long subtitle with icon to see it wrap words when overflown"
         value: "None"
         sensor.enabled: true
+        asset.name: "copy"
     }
 
     StatusDescriptionListItem {

ui/StatusQ/src/StatusQ/Components/StatusDescriptionListItem.qml

@@ -37,46 +37,56 @@ Rectangle {
             anchors.left: parent.left
             anchors.leftMargin: 16
             anchors.topMargin: 5
+            anchors.right: parent.right
+            anchors.rightMargin: 16
 
             color: Theme.palette.baseColor1
             text: statusDescriptionListItem.title
             font.pixelSize: 13
             font.weight: Font.Medium
+            elide: Text.ElideRight
         }
 
-        StatusBaseText {
-            id: statusDescriptionListItemSubTitle
+        Row {
             anchors.top: statusDescriptionListItemTitle.bottom
             anchors.left: parent.left
             anchors.leftMargin: 16
             anchors.topMargin: 4
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            spacing: 4
 
-            text: statusDescriptionListItem.subTitle
-            color: Theme.palette.directColor1
-            font.pixelSize: 15
-            font.weight: Font.Normal
-        }
+            StatusBaseText {
+                id: statusDescriptionListItemSubTitle
+                anchors.verticalCenter: parent.verticalCenter
+                width: Math.min(implicitWidth, parent.width - parent.spacing -
+                                (statusFlatRoundButton.visible ? statusFlatRoundButton.width : 0) -
+                                (valueRow.visible ? valueRow.width : 0))
+                text: statusDescriptionListItem.subTitle
+                color: Theme.palette.directColor1
+                elide: Text.ElideRight
+            }
 
-        StatusFlatRoundButton {
-            id: statusFlatRoundButton
-            visible: !!statusDescriptionListItem.asset.name
-            anchors.verticalCenter: statusDescriptionListItemSubTitle.verticalCenter
-            anchors.left: statusDescriptionListItemSubTitle.right
-            anchors.leftMargin: 4
+            StatusFlatRoundButton {
+                id: statusFlatRoundButton
+                visible: !!statusDescriptionListItem.asset.name
+                anchors.verticalCenter: parent.verticalCenter
 
-            width: 32
-            height: 32
+                width: 32
+                height: 32
 
-            icon.name: statusDescriptionListItem.asset.name
-            icon.width: statusDescriptionListItem.asset.width
-            icon.height: statusDescriptionListItem.asset.height
+                icon.name: statusDescriptionListItem.asset.name
+                icon.width: statusDescriptionListItem.asset.width
+                icon.height: statusDescriptionListItem.asset.height
 
-            StatusToolTip {
-                id: statusToolTip
+                StatusToolTip {
+                    id: statusToolTip
+                }
             }
         }
 
         Row {
+            id: valueRow
             anchors.right: parent.right
             anchors.rightMargin: 16
             anchors.verticalCenter: parent.verticalCenter
@@ -91,8 +101,7 @@ Rectangle {
             }
 
             StatusIcon {
-                icon: "chevron-down"
-                rotation: 270
+                icon: "next"
                 color: Theme.palette.baseColor1
             }
         }

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

@@ -85,8 +85,9 @@ ColumnLayout {
     }
 
     StatusDescriptionListItem {
+        Layout.fillWidth: true
         title: qsTr("Share community")
-        subTitle: Utils.getCommunityShareLink(root.community.id, true)
+        subTitle: Utils.getCommunityShareLink(root.community.id)
         tooltip.text: qsTr("Copied!")
         asset.name: "copy"
         iconButton.onClicked: {

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

@@ -46,7 +46,7 @@ Column {
 
     StatusDescriptionListItem {
         title: qsTr("Share community")
-        subTitle: Utils.getCommunityShareLink(root.community.id, true)
+        subTitle: Utils.getCommunityShareLink(root.community.id)
         tooltip.text: qsTr("Copied!")
         asset.name: "copy"
         iconButton.onClicked: {
@@ -78,31 +78,4 @@ Column {
         type: StatusListItem.Type.Danger
         onClicked: root.leaveButtonClicked()
     }
-
-    /*     // TODO add this back when roles exist */
-/* //        Loader { */
-/* //            active: root.community.isAdmin */
-/* //            width: parent.width */
-/* //            sourceComponent: CommunityPopupButton { */
-/* //                label: qsTr("Roles") */
-/* //                iconName: "roles" */
-/* //                width: parent.width */
-/* //                onClicked: console.log("TODO:") */
-/* //                txtColor: Style.current.textColor */
-/* //                SVGImage { */
-/* //                    anchors.verticalCenter: parent.verticalCenter */
-/* //                    anchors.right: parent.right */
-/* //                    anchors.rightMargin: Style.current.padding */
-/* //                    source: Style.svg("caret") */
-/* //                    width: 13 */
-/* //                    height: 7 */
-/* //                    rotation: -90 */
-/* //                    ColorOverlay { */
-/* //                        anchors.fill: parent */
-/* //                        source: parent */
-/* //                        color: Style.current.secondaryText */
-/* //                    } */
-/* //                } */
-/* //            } */
-/* //        } */
 }