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 = ({
Stations selected:
{value.length === 0 ? ( - None +
None
) : ( - +
+ +
)} );