fix(CommunitiesPortal): improve responsive layout on small viewports

- Slightly reduce card size on compact screens to prevent cuts.
- Reorder header in compact mode to prioritize title & primary actions; move secondary info.
- No API changes; larger screens unaffected.

Fixes #18838

Author: noeliaSD

ui/app/AppLayouts/Communities/CommunitiesPortalLayout.qml

@@ -1,5 +1,7 @@
 import QtQuick
+import QtQuick.Controls
 import QtQuick.Layouts
+import QtQml
 
 import StatusQ
 import StatusQ.Core
@@ -51,6 +53,9 @@ StatusSectionLayout {
         readonly property int preventShadowClipMargin: Theme.padding
 
         readonly property bool searchMode: searcher.text.length > 0
+
+        // Read-only flag that turns true when the component enters a “compact” layout automatically on resize.
+        readonly property bool compactMode: root.width < 600
     }
 
     SortFilterProxyModel {
@@ -107,49 +112,45 @@ StatusSectionLayout {
                 color: Theme.palette.directColor1
             }
 
-            RowLayout {
-                Layout.fillWidth: true
-                Layout.preferredHeight: 38
-                spacing: Theme.bigPadding
+            ColumnLayout {
+                spacing: Theme.padding
+
+                RowLayout {
+                    LayoutItemProxy {
+                        Layout.fillWidth: true
+
+                        target: SearchBox {
+                            id: searcher
+                            Layout.fillWidth: true
+                            Layout.maximumWidth: 327
+                            Layout.preferredHeight: 38
+                            Layout.alignment: Qt.AlignVCenter
+                            topPadding: 0
+                            bottomPadding: 0
+                        }
+                    }
 
-                SearchBox {
-                    id: searcher
-                    Layout.fillWidth: true
-                    Layout.maximumWidth: 327
-                    Layout.preferredHeight: 38
-                    Layout.alignment: Qt.AlignVCenter
-                    topPadding: 0
-                    bottomPadding: 0
-                }
+                    // filler
+                    Item {
+                        Layout.fillWidth: true
+                    }
 
-                // Just a row filler to fit design
-                Item { Layout.fillWidth: true }
+                    LayoutItemProxy {
+                        visible: !d.compactMode
 
-                StatusButton {
-                    Layout.fillWidth: true
-                    Layout.preferredHeight: 38
-                    Layout.maximumWidth: implicitWidth
-                    text: qsTr("Join Community")
-                    verticalPadding: 0
-                    onClicked: Global.importCommunityPopupRequested()
-                }
+                        Layout.fillWidth: true
+                        Layout.alignment: Qt.AlignHCenter
 
-                StatusButton {
-                    objectName: "createCommunityButton"
-                    visible: root.createCommunityEnabled
-                    Layout.preferredHeight: 38
-                    verticalPadding: 0
-                    text: qsTr("Create New Community")
-                    type: StatusBaseButton.Type.Primary
-                    onClicked: {
-                        // Global.openPopup(chooseCommunityCreationTypePopupComponent) // hidden as part of https://github.com/status-im/status-desktop/issues/17726
-                        root.communitiesStore.setCreateCommunityPopupSeen()
-                        Global.createCommunityPopupRequested(false /*isDiscordImport*/)
+                        target: buttonsRow
                     }
+                }
 
-                    StatusNewBadge {
-                        visible: root.createCommunityBadgeVisible
-                    }
+                LayoutItemProxy {
+                    visible: d.compactMode
+
+                    Layout.fillWidth: true
+
+                    target: buttonsRow
                 }
             }
 
@@ -191,6 +192,42 @@ StatusSectionLayout {
         }
     }
 
+    RowLayout {
+        id: buttonsRow
+        Layout.fillWidth: true
+        Layout.preferredHeight: 38
+        spacing: Theme.bigPadding
+
+        StatusButton {
+            Layout.fillWidth: true
+            Layout.preferredHeight: 38
+            Layout.maximumWidth: implicitWidth
+            text: qsTr("Join Community")
+            verticalPadding: 0
+            onClicked: Global.importCommunityPopupRequested()
+        }
+
+        StatusButton {
+            objectName: "createCommunityButton"
+            Layout.fillWidth: true
+            Layout.preferredHeight: 38
+            Layout.maximumWidth: implicitWidth
+            visible: root.createCommunityEnabled
+            verticalPadding: 0
+            text: qsTr("Create New Community")
+            type: StatusBaseButton.Type.Primary
+            onClicked: {
+                // Global.openPopup(chooseCommunityCreationTypePopupComponent) // hidden as part of https://github.com/status-im/status-desktop/issues/17726
+                root.communitiesStore.setCreateCommunityPopupSeen()
+                Global.createCommunityPopupRequested(false /*isDiscordImport*/)
+            }
+
+            StatusNewBadge {
+                visible: root.createCommunityBadgeVisible
+            }
+        }
+    }
+
     Component {
         id: chooseCommunityCreationTypePopupComponent
         StatusDialog {

ui/app/AppLayouts/Communities/views/CommunitiesGridView.qml

@@ -39,7 +39,9 @@ StatusScrollView {
         readonly property int subtitlePixelSize: 17
         readonly property int promotionalCardPosition: Math.max(gridLayout.delegateCountPerRow - 1, 1)
 
-        readonly property int delegateWidth: 335
+        readonly property int baseDelegateWidth: 335
+        readonly property int delegateWidth: d.baseDelegateWidth > root.contentWidth -  2 * Theme.padding ?
+                                                 root.contentWidth - 2 * Theme.padding : d.delegateWidth
 
         // URLs:
         readonly property string learnAboutCommunitiesVoteLink: Constants.statusHelpLinkPrefix + "communities/vote-to-feature-a-status-community#step-2-initiate-a-round-of-vote"
@@ -214,6 +216,8 @@ StatusScrollView {
             }
 
             PromotionalCommunityCard {
+                width: d.delegateWidth
+
                 onLearnMore: Global.openLinkWithConfirmation(d.learnAboutCommunitiesVoteLink,
                                                              StringUtils.extractDomainFromLink(d.learnAboutCommunitiesVoteLink))
                 onInitiateVote: Global.openLinkWithConfirmation(d.voteCommunityLink,