From 1a68038637d9cfa2ff89314293db155d48e683a3 Mon Sep 17 00:00:00 2001
From: thomassth <8331853+thomassth@users.noreply.github.com>
Date: Sat, 19 Apr 2025 02:37:33 -0400
Subject: [PATCH 1/3] style fix

---
 src/components/badges.tsx                   |  8 +++++--
 src/components/etaCard/EtaCard.module.css   | 26 ++++++++++-----------
 src/components/etaCard/EtaCard.tsx          | 12 +++++-----
 src/components/nearby/NearbyList.module.css |  2 +-
 src/components/nearby/NearbyList.tsx        |  4 ++--
 src/routes/Search.module.css                |  1 -
 6 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/components/badges.tsx b/src/components/badges.tsx
index d18546ea..3d684705 100644
--- a/src/components/badges.tsx
+++ b/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 }) {
diff --git a/src/components/etaCard/EtaCard.module.css b/src/components/etaCard/EtaCard.module.css
index b76b6484..2ed1807c 100644
--- a/src/components/etaCard/EtaCard.module.css
+++ b/src/components/etaCard/EtaCard.module.css
@@ -1,13 +1,11 @@
 .badge-group {
-  padding-bottom: 8px;
   padding-right: 8px;
   display: grid;
-  grid-template-rows: repeat(3, 1fr);
   gap: 4px;
-  grid-auto-flow: column;
+  height: fit-content;
 
   &.overflow {
-    grid-template-columns: repeat(2, 1fr);
+    /* grid-template-columns: repeat(2, 1fr); */
     grid-auto-flow: unset;
   }
 }
@@ -33,9 +31,14 @@
   border-radius: 50% !important;
 }
 
-.eta-card-countdown > * {
+.eta-card-countdown{
+  min-width: max-content;
+
+&> * {
   flex-wrap: wrap;
   float: right;
+  width: min-content;
+}
 }
 
 .bookmarked-stop {
@@ -57,14 +60,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;
   }
 }
diff --git a/src/components/etaCard/EtaCard.tsx b/src/components/etaCard/EtaCard.tsx
index f569b55f..c9a8a847 100644
--- a/src/components/etaCard/EtaCard.tsx
+++ b/src/components/etaCard/EtaCard.tsx
@@ -34,12 +34,10 @@ 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(" ")}
+      className={classList.join(" ")}
     >
       <Link to={props.stopUrl} className={style["grid-item"]}>
         <Card className={style["clickable-card"]}>
@@ -55,18 +53,20 @@ 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"]}>
+                  <span className={style["direction-badges"]}>
                   {directionArray.length > 0 &&
                     directionArray.map((direction) => (
                       <DirectionBadge
                         direction={direction}
+                        type="standalone"
                         key={`${props.id}-${direction}`}
                       />
-                    ))}
+                    ))}</span>
                   <span>{props.name}</span>
                 </span>
               </>
diff --git a/src/components/nearby/NearbyList.module.css b/src/components/nearby/NearbyList.module.css
index 09bb69ef..d73d073b 100644
--- a/src/components/nearby/NearbyList.module.css
+++ b/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;
diff --git a/src/components/nearby/NearbyList.tsx b/src/components/nearby/NearbyList.tsx
index a1527ead..9edc7c16 100644
--- a/src/components/nearby/NearbyList.tsx
+++ b/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>
+    </>
   );
 }
diff --git a/src/routes/Search.module.css b/src/routes/Search.module.css
index 66c554a8..660240e6 100644
--- a/src/routes/Search.module.css
+++ b/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;

From 88d1d144d831f5cc656a363177e5317c50d6d1ae Mon Sep 17 00:00:00 2001
From: thomassth <thomassth@users.noreply.github.com>
Date: Sat, 19 Apr 2025 02:41:04 -0400
Subject: [PATCH 2/3] badge min height

---
 src/components/etaCard/EtaCard.module.css | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/etaCard/EtaCard.module.css b/src/components/etaCard/EtaCard.module.css
index 2ed1807c..299b89d9 100644
--- a/src/components/etaCard/EtaCard.module.css
+++ b/src/components/etaCard/EtaCard.module.css
@@ -2,6 +2,7 @@
   padding-right: 8px;
   display: grid;
   gap: 4px;
+  grid-template-rows: repeat(3, 1fr);
   height: fit-content;
 
   &.overflow {
@@ -31,14 +32,14 @@
   border-radius: 50% !important;
 }
 
-.eta-card-countdown{
+.eta-card-countdown {
   min-width: max-content;
 
-&> * {
-  flex-wrap: wrap;
-  float: right;
-  width: min-content;
-}
+  & > * {
+    flex-wrap: wrap;
+    float: right;
+    width: min-content;
+  }
 }
 
 .bookmarked-stop {

From 355c7f56b1d7d67c053ffdb95d0f07212c80530f Mon Sep 17 00:00:00 2001
From: thomassth <thomassth@users.noreply.github.com>
Date: Sat, 19 Apr 2025 02:49:19 -0400
Subject: [PATCH 3/3] more style fix

---
 src/components/etaCard/EtaCard.tsx       | 40 +++++++++++++++---------
 src/components/nearby/NearbyStopCard.tsx |  3 +-
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/etaCard/EtaCard.tsx b/src/components/etaCard/EtaCard.tsx
index c9a8a847..a1900578 100644
--- a/src/components/etaCard/EtaCard.tsx
+++ b/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,11 +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"])
+  const classList = (props.editable ? [style["card-with-button"]] : []).concat([
+    "eta-card",
+  ]);
   return (
-    <li
-      className={classList.join(" ")}
-    >
+    <li className={classList.join(" ")}>
       <Link to={props.stopUrl} className={style["grid-item"]}>
         <Card className={style["clickable-card"]}>
           <CardHeader
@@ -53,21 +54,32 @@ export function EtaCard(props: {
                 >
                   {uniqueLines.map((line: string) => {
                     return (
-                      <TtcBadge key={`${props.id}-${line}`} lineNum={line} type="standalone" />
+                      <TtcBadge
+                        key={`${props.id}-${line}`}
+                        lineNum={line}
+                        type="standalone"
+                      />
                     );
                   })}
                 </div>
                 <span className={style["multi-line"]}>
                   <span className={style["direction-badges"]}>
-                  {directionArray.length > 0 &&
-                    directionArray.map((direction) => (
-                      <DirectionBadge
-                        direction={direction}
-                        type="standalone"
-                        key={`${props.id}-${direction}`}
-                      />
-                    ))}</span>
-                  <span>{props.name}</span>
+                    {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>
               </>
             }
diff --git a/src/components/nearby/NearbyStopCard.tsx b/src/components/nearby/NearbyStopCard.tsx
index 1709b874..7bd3b129 100644
--- a/src/components/nearby/NearbyStopCard.tsx
+++ b/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}