fix: text wrapping inside selected station tags

Within the "select stations" dialog, the station summary tags now wrap
onto a new line instead of the text within them wrapping (and spilling
out of their borders).

assets/css/dashboard/new-pa-message/selected-stations-summary.scss

@@ -1,14 +1,15 @@
 .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;
   padding: 15px 18px;
   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;
+  }
 }

assets/js/components/Dashboard/PaMessageForm/SelectStationsAndZones/SelectedStationsSummary.tsx

@@ -21,14 +21,16 @@ const SelectedStationsSummary = ({
       <GeoAltFill className="geo-alt-fill-icon" width={12} />
       <div className="label">Stations selected:</div>
       {value.length === 0 ? (
-        <span>None</span>
+        <div className="no-tags">None</div>
       ) : (
-        <SelectedSignsByRouteTags
-          places={places}
-          value={value}
-          onChange={onChange}
-          busRoutes={busRoutes}
-        />
+        <div className="selected-stations-tags">
+          <SelectedSignsByRouteTags
+            places={places}
+            value={value}
+            onChange={onChange}
+            busRoutes={busRoutes}
+          />
+        </div>
       )}
     </div>
   );