feat(StopName): Right Align Stop Features (#1779)

* feat(StopName): Right Align Stop Features * Fixed Wrapping * Moved to helper class * Updated the snapshot * Fixed snapshot * Reverted snapshot * Reverted snapshot again
mbta · Oct 26, 2023 · 9f1485c · 9f1485c
1 parent c87f3a6
commit 9f1485c
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/apps/site/assets/css/_flex.scss b/apps/site/assets/css/_flex.scss
@@ -15,6 +15,10 @@
   justify-content: center;
 }
 
+.justify-content-end {
+  justify-content: end;
+}
+
 .align-items-center {
   align-items: center;
 }
diff --git a/apps/site/assets/ts/stop/components/StopPageHeaderRedesign.tsx b/apps/site/assets/ts/stop/components/StopPageHeaderRedesign.tsx
@@ -25,10 +25,13 @@ const StopPageHeaderRedesign = ({
             <h1 className="stop-page__header--fontsize mt-8">{stop.name}</h1>
           </div>
           <div>
-            <div className="mt-8">
+            <div className="mt-8 d-flex justify-content-end">
               <StopFeatures stop={stop} routes={routes} />
             </div>
-            <div className="mt-n8 pb-8 fs-14" style={{ float: "right" }}>
+            <div
+              className="mt-n8 pb-8 fs-14 u-nowrap"
+              style={{ float: "right" }}
+            >
               {!isStopAStation(stop) && `Stop ${stop.id}`}
             </div>
           </div>