diff --git a/assets/css/dashboard/new-pa-message/selected-stations-summary.scss b/assets/css/dashboard/new-pa-message/selected-stations-summary.scss
index fa5d657af..d2e51b6c6 100644
--- a/assets/css/dashboard/new-pa-message/selected-stations-summary.scss
+++ b/assets/css/dashboard/new-pa-message/selected-stations-summary.scss
@@ -1,7 +1,7 @@
.selected-stations-summary {
+ flex-shrink: 0;
display: flex;
align-items: center;
- height: 52px;
border-radius: 8px;
background-color: $cool-gray-30;
margin: 40px 40px 0 40px;
@@ -9,6 +9,7 @@
font-weight: 500;
font-size: 20px;
line-height: 30px;
+ white-space: nowrap;
.label {
margin-right: 8px;
@@ -21,4 +22,16 @@
.geo-alt-fill-icon {
margin-right: 7px;
}
+
+ .no-tags {
+ // same height as the tags; avoids layout jumping when number of tags goes
+ // from 0 to 1 or vice-versa
+ line-height: 36px;
+ }
+
+ .selected-stations-tags {
+ display: flex;
+ flex-wrap: wrap;
+ row-gap: 4px;
+ }
}
diff --git a/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectedStationsSummary.tsx b/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectedStationsSummary.tsx
index 363901056..2a34528af 100644
--- a/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectedStationsSummary.tsx
+++ b/assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectedStationsSummary.tsx
@@ -21,14 +21,16 @@ const SelectedStationsSummary = ({