diff --git a/assets/css/detours/_detour_table.scss b/assets/css/detours/_detour_table.scss
index 51c6d5538..6ca9e1544 100644
--- a/assets/css/detours/_detour_table.scss
+++ b/assets/css/detours/_detour_table.scss
@@ -61,6 +61,12 @@ $table-border-radius: 0.5rem;
td:last-child {
border-bottom-right-radius: $table-border-radius;
}
+
+ @include media-breakpoint-down(md) {
+ td {
+ border-bottom: none;
+ }
+ }
}
}
diff --git a/assets/src/components/detourListPage.tsx b/assets/src/components/detourListPage.tsx
index f4122d959..c2808b6a0 100644
--- a/assets/src/components/detourListPage.tsx
+++ b/assets/src/components/detourListPage.tsx
@@ -1,5 +1,5 @@
import React, { useCallback, useState } from "react"
-import { DetoursTable } from "./detoursTable"
+import { DetoursTable, DetourStatus } from "./detoursTable"
import userInTestGroup, { TestGroups } from "../userInTestGroup"
import { Button } from "react-bootstrap"
import { PlusSquare } from "../helpers/bsIcons"
@@ -61,15 +61,21 @@ export const DetourListPage = () => {
)}
{detours && (
<>
- {detours.active && (
-
Route and direction | +Starting Intersection | ++ {timestampLabelFromStatus(status)} + | +
---|
Route and direction | -Starting Intersection | -On detour since | -|
---|---|---|---|
-
-
- {detour.name}
-
- {detour.direction}
-
+ <>
+ {data.map((detour, index) => (
+
+ |
-
+
+
- {detour.name}
+
+ {detour.direction}
- {detour.intersection}
- |
-
- {timeAgoLabel(epochNowInSeconds, detour.updatedAt)}
- |
- |
{message}
++ Route and direction + | + + +||
---|---|---|
+
+
+
+
+
+ + No draft detours. + + |
+