From 88fad7c28479b8d103c9d4b53b112d1fea8efb83 Mon Sep 17 00:00:00 2001
From: Cristen Jones <cjones3@mbta.com>
Date: Wed, 18 Sep 2024 14:21:12 -0400
Subject: [PATCH] hotfix: adjust stop number positioning

---
 .../ts/ui/autocomplete/templates/algolia.tsx  | 35 ++++++++++---------
 1 file changed, 18 insertions(+), 17 deletions(-)

diff --git a/assets/ts/ui/autocomplete/templates/algolia.tsx b/assets/ts/ui/autocomplete/templates/algolia.tsx
index 168a1d796f..786bac91ec 100644
--- a/assets/ts/ui/autocomplete/templates/algolia.tsx
+++ b/assets/ts/ui/autocomplete/templates/algolia.tsx
@@ -112,26 +112,27 @@ const AlgoliaItemTemplate: SourceTemplates<AutocompleteItem>["item"] = ({
           </div>
         </div>
         {!isContentItem(item) && featureIcons.length > 0 && (
-          <div className="tw-flex tw-gap-1 tw-mt-2 tw-mb-1">
-            {featureIcons.map((feature: string) => (
-              <span
-                key={uniqueId()}
-                className="c-search-result__feature-icons"
-                // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML={{ __html: feature }}
-              />
-            ))}
+          <div className="tw-mt-2 tw-mb-1 tw-flex tw-justify-between tw-items-baseline">
+            <div className="tw-flex tw-gap-1">
+              {featureIcons.map((feature: string) => (
+                <span
+                  key={uniqueId()}
+                  className="c-search-result__feature-icons"
+                  // eslint-disable-next-line react/no-danger
+                  dangerouslySetInnerHTML={{ __html: feature }}
+                />
+              ))}
+            </div>
+            {isStopItem(item) && (
+              <div className="tw-text-nowrap tw-text-gray-500 tw-text-sm tw-font-normal">
+                {`${item.stop.municipality}, ${
+                  item.stop.address ? stateAbbr(item.stop.address) : "MA"
+                }`}
+              </div>
+            )}
           </div>
         )}
       </div>
-
-      {isStopItem(item) && (
-        <div className="tw-text-nowrap tw-text-gray-500 tw-text-sm tw-font-normal">
-          {`${item.stop.municipality}, ${
-            item.stop.address ? stateAbbr(item.stop.address) : "MA"
-          }`}
-        </div>
-      )}
     </div>
   );
 };