nearby fixes

src/components/badges.tsx

@@ -48,8 +48,12 @@ const badgeOutline = (text: string) => {
   }
 };
 
-export function DirectionBadge(props: { direction: string }) {
-  return <Badge className={style["line-badge"]}>{props.direction}</Badge>;
+export function DirectionBadge(props: { direction: string; type?: string }) {
+  const classList =
+  props.type === "standalone"
+    ? [style["line-badge"], style.standalone]
+    : [style["line-badge"]];
+  return <Badge className={classList.join(" ")}>{props.direction}</Badge>;
 }
 
 export function TtcBadge(props: { lineNum: string; type?: string }) {

src/components/etaCard/EtaCard.module.css

@@ -1,13 +1,12 @@
 .badge-group {
-  padding-bottom: 8px;
   padding-right: 8px;
   display: grid;
-  grid-template-rows: repeat(3, 1fr);
   gap: 4px;
-  grid-auto-flow: column;
+  grid-template-rows: repeat(3, 1fr);
+  height: fit-content;
 
   &.overflow {
-    grid-template-columns: repeat(2, 1fr);
+    /* grid-template-columns: repeat(2, 1fr); */
     grid-auto-flow: unset;
   }
 }
@@ -33,9 +32,14 @@
   border-radius: 50% !important;
 }
 
-.eta-card-countdown > * {
-  flex-wrap: wrap;
-  float: right;
+.eta-card-countdown {
+  min-width: max-content;
+
+  & > * {
+    flex-wrap: wrap;
+    float: right;
+    width: min-content;
+  }
 }
 
 .bookmarked-stop {
@@ -57,14 +61,11 @@
 
 .multi-line {
   white-space: pre-line;
-}
-
-@media (width >= 800px) {
-  .eta-card-countdown {
-    min-width: 160px;
-  }
 
-  .eta-card-countdown > * {
-    flex-wrap: nowrap;
+  .direction-badges {
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    padding-right: 4px;
   }
 }

src/components/etaCard/EtaCard.tsx

@@ -25,6 +25,7 @@ export function EtaCard(props: {
   etas: EtaBusWithID[];
   lines: string[];
   name: string;
+  distance?: string;
   editable: boolean;
   onDelete?: () => void;
   stopUrl: string;
@@ -34,13 +35,11 @@ export function EtaCard(props: {
 }) {
   const uniqueLines = [...new Set(props.lines)];
   const directionArray = props.direction?.split(", ") ?? [];
+  const classList = (props.editable ? [style["card-with-button"]] : []).concat([
+    "eta-card",
+  ]);
   return (
-    <li
-      className={[
-        "eta-card",
-        props.editable ? style["card-with-button"] : "",
-      ].join(" ")}
-    >
+    <li className={classList.join(" ")}>
       <Link to={props.stopUrl} className={style["grid-item"]}>
         <Card className={style["clickable-card"]}>
           <CardHeader
@@ -55,19 +54,32 @@ export function EtaCard(props: {
                 >
                   {uniqueLines.map((line: string) => {
                     return (
-                      <TtcBadge key={`${props.id}-${line}`} lineNum={line} />
+                      <TtcBadge
+                        key={`${props.id}-${line}`}
+                        lineNum={line}
+                        type="standalone"
+                      />
                     );
                   })}
                 </div>
                 <span className={style["multi-line"]}>
-                  {directionArray.length > 0 &&
-                    directionArray.map((direction) => (
-                      <DirectionBadge
-                        direction={direction}
-                        key={`${props.id}-${direction}`}
-                      />
-                    ))}
-                  <span>{props.name}</span>
+                  <span className={style["direction-badges"]}>
+                    {directionArray.length > 0 &&
+                      directionArray.map((direction) => (
+                        <DirectionBadge
+                          direction={direction}
+                          type="standalone"
+                          key={`${props.id}-${direction}`}
+                        />
+                      ))}
+                  </span>
+                  <span className="stop-name">{props.name}</span>
+                  {props.distance && (
+                    <>
+                      <br />
+                      <span className="stop-distance">{props.distance}</span>
+                    </>
+                  )}
                 </span>
               </>
             }

src/components/nearby/NearbyList.module.css

@@ -1,6 +1,6 @@
 .nearby-stops-list {
   display: grid;
-  grid-template-columns: repeat(auto-fit, 1fr);
+  grid-template-columns: 100%;
   gap: 24px;
   margin: 20px 0;
   padding-left: 0;

src/components/nearby/NearbyList.tsx

@@ -57,7 +57,7 @@ export default function NearbyList(props: {
   }, [props.coordinate]);
 
   return (
-    <div>
+    <>
       {props.coordinate.lat && props.coordinate.lon ? (
         <>
           <p>{t("nearby.closestStopsLead")}</p>
@@ -71,6 +71,6 @@ export default function NearbyList(props: {
         <p>{t("nearby.locationNeeded")}</p>
       )}
       <RawDisplay data={busAndSubwayStops} />
-    </div>
+    </>
   );
 }

src/components/nearby/NearbyStopCard.tsx

@@ -67,7 +67,8 @@ export default function NearbyStopCard({ stop }: { stop: StopWithDistance }) {
       key={stop.id}
       direction={direction}
       lines={lines}
-      name={`${stop.title}\n${stop.realDistance.toPrecision(4)}${t("nearby.mAway")}`}
+      name={`${stop.title}`}
+      distance={`${stop.realDistance.toPrecision(4)}${t("nearby.mAway")}`}
       id={stop.id}
       stopUrl={url}
       etas={unifiedEta}

src/routes/Search.module.css

@@ -17,7 +17,6 @@
   border: black solid 8px;
   max-width: min(100%, 30rem);
   margin: auto;
-  width: max-content;
 
   .title {
     background-color: black;