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,41 @@ StatusSectionLayout {
                 color: Theme.palette.directColor1
             }
 
-            RowLayout {
-                Layout.fillWidth: true
-                Layout.preferredHeight: 38
-                spacing: Theme.bigPadding
+            ColumnLayout {
+                spacing: Theme.padding
+
+                RowLayout {
+                    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 +188,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

@@ -30,16 +30,27 @@ StatusScrollView {
     signal cardClicked(string communityId)
 
     clip: false
+    contentWidth: availableWidth
+    contentItem.scale: d.scale
+    contentItem.width: availableWidth / contentItem.scale
+    contentItem.height: availableHeight / contentItem.scale
+    contentItem.transformOrigin: Item.TopLeft
 
     QtObject {
         id: d
 
-        // values from the design
+        // Values from the design
         readonly property int scrollViewTopMargin: 20
         readonly property int subtitlePixelSize: 17
         readonly property int promotionalCardPosition: Math.max(gridLayout.delegateCountPerRow - 1, 1)
-    
-        readonly property int delegateWidth: 335
+        property int delegateWidth: 335
+
+        readonly property real minWidth: d.delegateWidth + root.rightPadding + root.leftPadding + 2 * Theme.padding
+        readonly property real scale: Math.min(1, root.availableWidth / minWidth)
+
+        Behavior on delegateWidth {
+            PropertyAnimation { duration: Theme.AnimationDuration.Fast }
+        }
 
         // URLs:
         readonly property string learnAboutCommunitiesVoteLink: Constants.statusHelpLinkPrefix + "communities/vote-to-feature-a-status-community#step-2-initiate-a-round-of-vote"
@@ -214,6 +225,8 @@ StatusScrollView {
             }
 
             PromotionalCommunityCard {
+                width: d.delegateWidth
+
                 onLearnMore: Global.openLinkWithConfirmation(d.learnAboutCommunitiesVoteLink,
                                                              StringUtils.extractDomainFromLink(d.learnAboutCommunitiesVoteLink))
                 onInitiateVote: Global.openLinkWithConfirmation(d.voteCommunityLink,