CSS fix for safari (#103)

thomassth · May 28, 2024 · b15b7c5 · b15b7c5
1 parent cbb719b
commit b15b7c5
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/src/components/countdown/CountdownSec.module.css b/src/components/countdown/CountdownSec.module.css
@@ -7,11 +7,16 @@
 
 .arriving {
   align-self: center;
-  min-width: 3.5rem;
 }
 
 .number {
   margin: 0;
   font-family: "PT Mono", monospace !important;
   white-space: nowrap !important;
 }
+
+/* only needed for safari */
+.badge-in-link {
+  display: unset !important;
+  padding: 3px 6px !important
+}
diff --git a/src/components/countdown/CountdownSec.tsx b/src/components/countdown/CountdownSec.tsx
@@ -74,10 +74,16 @@ function ArrivingBadge({ vehicle }: { vehicle?: number }) {
     <div className={style.arriving}>
       {vehicle ? (
         <Link to={`${vehicle}`}>
-          <Badge shape="rounded">Track location</Badge>
+          <Badge className={style["badge-in-link"]} shape="rounded">
+            Track location
+          </Badge>
         </Link>
       ) : (
-        <Badge color="danger" shape="rounded">
+        <Badge
+          className={style["badge-in-link"]}
+          color="danger"
+          shape="rounded"
+        >
           {t("badge.arriving")}
         </Badge>
       )}