fixup(DeparturesAndMap): allow text wrapping

Adjust the "Back to all routes" control so that it can wrap long test.
While we're here, also change this element to a button. This enables keyboard navigability and is more accessible.

apps/site/assets/css/_stop-card.scss

@@ -303,24 +303,22 @@ $radius: 4px;
 }
 
 .back-to-routes {
-  align-items: center;
   background-color: $gray-bordered-background;
   border: .25px solid $gray-lighter;
   color: $brand-primary;
-  display: flex;
-  font-size: 1rem;
-  height: 2.5rem;
-  padding-left: .625rem;
-  text-decoration: underline;
-  text-underline-offset: .2rem;
-  :first-child {
-    cursor: pointer;
-    display: inline-block;
-    font-weight: 400;
-    :first-child {
-      font-weight: 900;
-      padding-right: .5rem;
-    }
+
+  .btn {
+    align-items: baseline;
+    display: flex;
+    gap: .5em;
+    padding: $base-spacing-sm;
+    white-space: unset;
+  }
+
+  span {
+    text-align: left;
+    text-decoration: underline;
+    text-underline-offset: .2rem;
   }
 }
 

apps/site/assets/ts/stop/components/DeparturesAndMap.tsx

@@ -154,15 +154,15 @@ const DeparturesAndMap = ({
 
   const BackToRoutes = (
     <div className="back-to-routes">
-      <div
+      <button
+        className="btn"
         onClick={unsetDepartureInfo}
         onKeyDown={unsetDepartureInfo}
-        aria-label={`Back to all ${stop.name} routes`}
-        role="presentation"
+        type="button"
       >
-        {renderFa("", "fa-angle-left")}
-        {`Back to all ${stop.name} routes`}
-      </div>
+        {renderFa("", "fa-fw fa-angle-left")}
+        <span className="btn-link">{`Back to all ${stop.name} routes`}</span>
+      </button>
     </div>
   );