diff --git a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
index 9c1c3ee20..41244d0c8 100644
--- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -1,5 +1,1748 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Detours Page: Open a Detour detour details drawer is collapsible on mobile 1`] = `
+<body
+  data-rr-ui-modal-open=""
+  style="padding-right: 2048px;"
+>
+  <div>
+    <div
+      class="c-detour-list-page h-100 overflow-y-auto p-0 p-md-4 bg-white"
+    >
+      <button
+        class="c-detour-list-page__button icon-link fw-light px-3 py-2 u-hide-for-mobile btn btn-primary"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="bi bi-plus-square"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"
+          />
+          <path
+            d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__button-text"
+        >
+          Add detour
+        </span>
+      </button>
+      <div
+        class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+      >
+        <h2
+          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        >
+          Active detours
+        </h2>
+        <svg
+          aria-hidden="true"
+          class="c-detour-list-page__header-icon my-auto me-1"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__header-visibility my-auto"
+        >
+          All Skate users
+        </span>
+      </div>
+      <table
+        class="mb-5 c-detours-table table table-active-detour table-hover"
+      >
+        <thead
+          class="u-hide-for-mobile"
+        >
+          <tr>
+            <th
+              class="px-3 py-4"
+            >
+              Route and direction
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Starting Intersection
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              On detour since
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td
+              class="align-middle p-3"
+            >
+              <div
+                class="d-flex"
+              >
+                <div
+                  class="c-route-pill c-route-pill--bus"
+                >
+                  10
+                </div>
+                <div
+                  class="c-detours-table__route-info-text d-inline-block"
+                >
+                  <div
+                    class="pb-1 fs-4 fw-semibold"
+                  >
+                    Headsign 10
+                  </div>
+                  <div
+                    class="c-detours-table__route-info-direction fs-6"
+                  >
+                    Inbound
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              Street A10 & Avenue B10
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              26 hours ago
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="align-middle p-3"
+            >
+              <div
+                class="d-flex"
+              >
+                <div
+                  class="c-route-pill c-route-pill--bus"
+                >
+                  11
+                </div>
+                <div
+                  class="c-detours-table__route-info-text d-inline-block"
+                >
+                  <div
+                    class="pb-1 fs-4 fw-semibold"
+                  >
+                    Headsign 11
+                  </div>
+                  <div
+                    class="c-detours-table__route-info-direction fs-6"
+                  >
+                    Outbound
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              Street A11 & Avenue B11
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              26 hours ago
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+      >
+        <h2
+          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        >
+          Draft detours
+        </h2>
+        <svg
+          aria-hidden="true"
+          class="c-detour-list-page__header-icon my-auto me-1"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__header-visibility my-auto"
+        >
+          Only you
+        </span>
+      </div>
+      <table
+        class="mb-5 u-hide-for-mobile c-detours-table table"
+      >
+        <thead
+          class="u-hide-for-mobile"
+        >
+          <tr>
+            <th
+              class="px-3 py-4"
+            >
+              Route and direction
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Starting Intersection
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Last edited
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            aria-hidden="true"
+          >
+            <td
+              class="p-3 p-md-4"
+              colspan="3"
+            >
+              <div
+                class="d-flex justify-content-center mb-3"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="bi"
+                  fill="none"
+                  height="100px"
+                  viewBox="0 0 101 97"
+                  width="100px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M50.7593 96.3069C78.7676 95.6159 101.216 73.7201 100.483 47.9743C99.7264 21.4318 77.8338 0.0142709 50.2246 0.154493C22.6152 0.29649 0.353077 21.9361 0.50073 48.4878C0.648383 75.0396 23.1499 96.4489 50.7593 96.3069Z"
+                    fill="#DBDDE1"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M77.8546 42.8941L75.109 22.182C74.4117 18.4448 71.9552 16.9864 68.3003 15.457C62.3115 13.3999 55.9969 12.29 49.6168 12.173C43.2269 12.2913 36.9025 13.4011 30.9028 15.457C27.2934 16.9576 24.8367 18.4442 24.0937 22.1814L21.3335 42.8941V71.5485H26.1788V76.5389C26.1854 78.5889 27.9643 80.2491 30.1604 80.2547C32.3563 80.2487 34.1348 78.5884 34.1413 76.5385V71.5481H65.1922V76.5385C65.1818 77.8726 65.9382 79.1096 67.1742 79.7796C68.4101 80.4495 69.9359 80.4495 71.1719 79.7796C72.4079 79.1096 73.1643 77.8726 73.1538 76.5385V71.5481H77.8552L77.8546 42.8941ZM37.9849 17.4111H61.3396C62.328 17.4111 63.1292 18.1591 63.1292 19.0817C63.1292 20.0044 62.328 20.7523 61.3396 20.7523H37.9849C36.9965 20.7523 36.1953 20.0044 36.1953 19.0817C36.1953 18.1591 36.9965 17.4111 37.9849 17.4111ZM28.6269 25.9337L26.3532 42.2854C26.323 42.4731 26.323 42.6639 26.3532 42.8517C26.3241 43.4151 26.5364 43.9662 26.9433 44.3832C27.3502 44.8002 27.9182 45.0489 28.5218 45.0743H70.8784C71.481 45.0804 72.061 44.8605 72.4884 44.4639C72.9158 44.0674 73.1549 43.5273 73.1521 42.9648V42.8517C73.1826 42.664 73.1826 42.4731 73.1521 42.2854L70.8784 25.9337C70.6956 24.9045 69.7364 24.1533 68.6189 24.1642H30.9006C29.7801 24.153 28.8166 24.9028 28.6269 25.9337ZM30.1604 62.6858C27.8195 62.6898 25.9183 60.9216 25.9139 58.7363C25.9096 56.551 27.8036 54.7762 30.1445 54.772C32.4854 54.7678 34.3868 56.5358 34.3914 58.7211C34.3943 59.7708 33.95 60.7786 33.1563 61.5223C32.3627 62.266 31.2849 62.6846 30.1604 62.6858ZM64.9351 58.7263C64.9335 60.9096 66.8266 62.6815 69.1654 62.6858H69.1648C70.2922 62.6887 71.3743 62.272 72.1716 61.5278C72.9688 60.7837 73.4154 59.7735 73.4125 58.7211C73.4079 56.5378 71.5098 54.7705 69.171 54.772C66.8322 54.7734 64.9366 56.543 64.9351 58.7263Z"
+                    fill="#1C1E23"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+              <div
+                class="d-flex justify-content-center"
+              >
+                <p
+                  class="fs-3 fw-light m-0"
+                >
+                  No draft detours.
+                </p>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+      >
+        <h2
+          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        >
+          Closed detours
+        </h2>
+        <svg
+          aria-hidden="true"
+          class="c-detour-list-page__header-icon my-auto me-1"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__header-visibility my-auto"
+        >
+          Dispatchers and supervisors
+        </span>
+      </div>
+      <table
+        class="u-hide-for-mobile c-detours-table table table-hover"
+      >
+        <thead
+          class="u-hide-for-mobile"
+        >
+          <tr>
+            <th
+              class="px-3 py-4"
+            >
+              Route and direction
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Starting Intersection
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Last used
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td
+              class="align-middle p-3"
+            >
+              <div
+                class="d-flex"
+              >
+                <div
+                  class="c-route-pill c-route-pill--bus"
+                >
+                  12
+                </div>
+                <div
+                  class="c-detours-table__route-info-text d-inline-block"
+                >
+                  <div
+                    class="pb-1 fs-4 fw-semibold"
+                  >
+                    Headsign Z
+                  </div>
+                  <div
+                    class="c-detours-table__route-info-direction fs-6"
+                  >
+                    Inbound
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              Street A12 & Avenue B12
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              26 hours ago
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div />
+  <div
+    aria-modal="true"
+    class="c-detour-modal c-detour-modal__transition-appear c-detour-modal__transition-appear-active"
+    role="dialog"
+    tabindex="-1"
+  >
+    <article
+      class="l-diversion-page l-diversion-page--mobile h-100 border-box inherit-box"
+    >
+      <header
+        class="l-diversion-page__header border-bottom text-bg-light"
+      >
+        <div
+          class="flex-grow-1 fw-semibold text-center"
+        >
+          Detours
+        </div>
+        <button
+          aria-label="Close"
+          class="btn-close p-4"
+          type="button"
+        />
+      </header>
+      <div
+        class="l-diversion-page__panel text-bg-light"
+      >
+        <div
+          class="c-drawer c-drawer--hidden u-hideable--hidden"
+        >
+          <button
+            class="c-drawer-tab c-drawer-tab__tab-button"
+            title="Expand"
+          >
+            <span>
+              <svg />
+            </span>
+          </button>
+          <article
+            class="l-diversion-page-panel border-end"
+          >
+            <header
+              class="l-diversion-page-panel__header border-bottom px-3"
+            >
+              <h1
+                class="c-diversion-panel__h1 my-3"
+              >
+                Share Detour Details
+              </h1>
+            </header>
+            <div
+              class="l-diversion-page-panel__body bg-light d-flex flex-column"
+            >
+              <div
+                class="l-diversion-page-panel__scroll-area px-3 d-flex flex-column"
+              >
+                <button
+                  class="align-self-start icon-link my-3 btn btn-outline-primary"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="bi bi-arrow-left"
+                    fill="currentColor"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                   Edit Detour
+                </button>
+                <textarea
+                  class="flex-grow-1 mb-3 form-control"
+                  style="resize: none;"
+                >
+                  Detour 3 Outbound
+Route pattern From A3 - To B3
+
+Connection Points:
+N/A
+N/A
+
+Missed Stops (undefined):
+no stops
+
+Turn-by-Turn Directions:
+                </textarea>
+              </div>
+              <div
+                class="border-top d-flex mt-auto d-flex flex-column"
+              >
+                <button
+                  class="m-3 flex-grow-1 btn btn-primary"
+                  type="button"
+                >
+                  Copy Details
+                </button>
+              </div>
+            </div>
+          </article>
+        </div>
+        <button
+          class="c-drawer__backdrop-button"
+        />
+      </div>
+      <div
+        class="l-diversion-page__map position-relative"
+      >
+        <div
+          class="fade position-absolute top-0 left-0 m-2 icon-link z-1 alert alert-info show"
+          role="alert"
+        >
+          <svg
+            aria-hidden="true"
+            class="bi bi-exclamation-circle-fill"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2"
+            />
+          </svg>
+          Detour shape is not editable from this screen.
+        </div>
+        <div
+          class="h-100"
+        >
+          <div
+            class="c-vehicle-map-state"
+          />
+          <div
+            class="c-vehicle-map leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+            id="id-vehicle-map"
+            style="position: relative;"
+            tabindex="0"
+          >
+            <div
+              class="leaflet-pane leaflet-map-pane"
+              style="left: 0px; top: 0px;"
+            >
+              <div
+                class="leaflet-pane leaflet-tile-pane"
+              >
+                <div
+                  class="leaflet-layer "
+                  style="z-index: 1;"
+                >
+                  <div
+                    class="leaflet-tile-container leaflet-zoom-animated"
+                    style="z-index: 21; left: 0px; top: 0px;"
+                  >
+                    <img
+                      alt=""
+                      class="leaflet-tile"
+                      src="undefined"
+                      style="width: 256px; height: 256px; left: -4px; top: -239px;"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                class="leaflet-pane leaflet-overlay-pane"
+              >
+                <svg
+                  height="0"
+                  pointer-events="none"
+                  style="left: 0px; top: 0px;"
+                  viewBox="0 0 0 0"
+                  width="0"
+                >
+                  <g>
+                    <path
+                      class="c-detour_map--detour-route-shape"
+                      d="M0 0"
+                      fill="none"
+                      stroke="#3388ff"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-opacity="1"
+                      stroke-width="6"
+                    />
+                    <path
+                      class="c-detour_map--original-route-shape-core"
+                      d="M0 0"
+                      fill="none"
+                      stroke="#3388ff"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-opacity="1"
+                      stroke-width="6"
+                    />
+                  </g>
+                </svg>
+              </div>
+              <div
+                class="leaflet-pane leaflet-shadow-pane"
+              />
+              <div
+                class="leaflet-pane leaflet-marker-pane"
+              >
+                <div
+                  class="leaflet-pane leaflet-primaryVehicles-pane"
+                  style="z-index: 499;"
+                />
+                <div
+                  class="leaflet-pane leaflet-secondaryVehicles-pane"
+                  style="z-index: 400;"
+                />
+                <div
+                  class="leaflet-pane leaflet-notableLocationMarkers-pane"
+                  style="z-index: 410;"
+                />
+                <div
+                  class="leaflet-marker-icon leaflet-zoom-hide"
+                  role="button"
+                  style="margin-left: -8px; margin-top: -8px; width: 16px; height: 16px; left: 1px; top: -1px; z-index: -1;"
+                  tabindex="0"
+                  title="Detour Start"
+                >
+                  <div
+                    class="w-100 h-100"
+                  >
+                    <svg
+                      class="c-detour_map-circle-marker--start"
+                      height="100%"
+                      viewBox="0 0 16 16"
+                      width="100%"
+                    >
+                      <circle
+                        cx="8"
+                        cy="8"
+                        opacity="0.5"
+                        r="7.5"
+                      />
+                      <circle
+                        cx="8"
+                        cy="8"
+                        r="6"
+                        stroke="white"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="leaflet-marker-icon leaflet-zoom-hide"
+                  role="button"
+                  style="margin-left: -5px; margin-top: -5px; width: 10px; height: 10px; left: 1px; top: -1px; z-index: -1;"
+                  tabindex="0"
+                >
+                  <div
+                    class="w-100 h-100"
+                  >
+                    <svg
+                      class="c-detour_map-circle-marker--detour-point"
+                      fill="none"
+                      height="100%"
+                      viewBox="0 0 10 10"
+                      width="100%"
+                    >
+                      <circle
+                        cx="5"
+                        cy="5"
+                        r="4.5"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="leaflet-marker-icon leaflet-zoom-hide"
+                  role="button"
+                  style="margin-left: -8px; margin-top: -8px; width: 16px; height: 16px; left: 1px; top: -1px; z-index: -1;"
+                  tabindex="0"
+                  title="Detour End"
+                >
+                  <div
+                    class="w-100 h-100"
+                  >
+                    <svg
+                      class="c-detour_map-circle-marker--end"
+                      height="100%"
+                      viewBox="0 0 16 16"
+                      width="100%"
+                    >
+                      <circle
+                        cx="8"
+                        cy="8"
+                        opacity="0.5"
+                        r="7.5"
+                      />
+                      <circle
+                        cx="8"
+                        cy="8"
+                        r="6"
+                        stroke="white"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="leaflet-marker-icon c-stop-icon-container c-vehicle-map__stop leaflet-zoom-hide leaflet-interactive"
+                  role="button"
+                  style="margin-left: -7px; margin-top: -7px; width: 14px; height: 14px; left: 0px; top: -1px; z-index: -1;"
+                  tabindex="0"
+                >
+                  <div
+                    class="w-100 h-100"
+                  >
+                    <svg
+                      class="c-stop-icon"
+                      height="100%"
+                      width="100%"
+                    >
+                      <svg
+                        fill="none"
+                        viewBox="0 0 14 14"
+                      >
+                        <circle
+                          class="c-stop-icon__focus-circle"
+                          cx="7"
+                          cy="7"
+                          r="8"
+                        />
+                        <circle
+                          class="c-stop-icon__circle c-stop-icon__circle--small"
+                          cx="7"
+                          cy="7"
+                          r="5"
+                        />
+                      </svg>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="leaflet-pane leaflet-tooltip-pane"
+              />
+              <div
+                class="leaflet-pane leaflet-popup-pane"
+              />
+            </div>
+            <div
+              class="leaflet-control-container"
+            >
+              <div
+                class="leaflet-control leaflet-bar c-street-view-switch position-absolute"
+              >
+                <label
+                  aria-hidden="true"
+                  aria-label=""
+                  class="c-street-view-switch__label"
+                  for="street-view-toggle-:r6:"
+                  role="presentation"
+                >
+                  <span
+                    class="c-street-view-switch__label-icon"
+                  >
+                    <svg />
+                  </span>
+                </label>
+                <label
+                  class="c-street-view-switch__label c-street-view-switch__label-text stretched-link"
+                  for="street-view-toggle-:r6:"
+                >
+                  Street View
+                </label>
+                <div
+                  class="c-street-view-switch__input form-switch"
+                >
+                  <input
+                    class="form-check-input"
+                    id="street-view-toggle-:r6:"
+                    role="switch"
+                    type="checkbox"
+                  />
+                </div>
+              </div>
+              <div
+                class="leaflet-top leaflet-left"
+              />
+              <div
+                class="leaflet-top leaflet-right"
+              >
+                <div
+                  class="leaflet-control-zoom leaflet-bar leaflet-control"
+                >
+                  <a
+                    aria-disabled="false"
+                    aria-label="Zoom in"
+                    class="leaflet-control-zoom-in"
+                    href="#"
+                    role="button"
+                    title="Zoom in"
+                  >
+                    <span
+                      aria-hidden="true"
+                    >
+                      +
+                    </span>
+                  </a>
+                  <a
+                    aria-disabled="false"
+                    aria-label="Zoom out"
+                    class="leaflet-control-zoom-out"
+                    href="#"
+                    role="button"
+                    title="Zoom out"
+                  >
+                    <span
+                      aria-hidden="true"
+                    >
+                      −
+                    </span>
+                  </a>
+                </div>
+                <div
+                  class="leaflet-control"
+                >
+                  <div
+                    class="c-layers-control"
+                  >
+                    <button
+                      class="c-layers-control__button leaflet-bar"
+                      title="Layers"
+                    >
+                      <span>
+                        <svg />
+                      </span>
+                    </button>
+                    <div
+                      class="c-layers-control__pill"
+                      hidden=""
+                    >
+                      1
+                    </div>
+                    <div
+                      hidden=""
+                    >
+                      <div
+                        class="c-layers-control__content"
+                      >
+                        <ul
+                          class="list-group"
+                        >
+                          <li
+                            aria-labelledby="tile-layer-control-label-:r7:"
+                            class="list-group-item"
+                          >
+                            <div
+                              class="c-layers-control__tile_layer_control"
+                            >
+                              <h2
+                                id="tile-layer-control-label-:r7:"
+                              >
+                                Base Map
+                              </h2>
+                              <div
+                                class="position-relative form-check"
+                              >
+                                <input
+                                  checked=""
+                                  class="form-check-input"
+                                  id="base-layer-radio-:r9:"
+                                  name="layers-control-tile-type-:rb:"
+                                  type="radio"
+                                  value=""
+                                />
+                                <label
+                                  class="stretched-link form-check-label"
+                                  for="base-layer-radio-:r9:"
+                                >
+                                  Map (default)
+                                </label>
+                              </div>
+                              <div
+                                class="position-relative form-check"
+                              >
+                                <input
+                                  class="form-check-input"
+                                  id="satellite-layer-radio-:ra:"
+                                  name="layers-control-tile-type-:rb:"
+                                  type="radio"
+                                  value=""
+                                />
+                                <label
+                                  class="stretched-link form-check-label"
+                                  for="satellite-layer-radio-:ra:"
+                                >
+                                  Satellite
+                                </label>
+                              </div>
+                            </div>
+                          </li>
+                        </ul>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="leaflet-bar leaflet-control"
+                >
+                  <a
+                    aria-label="Full Screen"
+                    class="leaflet-control-zoom-fullscreen fullscreen-icon"
+                    href="#"
+                    role="button"
+                    title="Full Screen"
+                  />
+                </div>
+              </div>
+              <div
+                class="leaflet-bottom leaflet-left"
+              >
+                <div
+                  class="leaflet-control leaflet-bar"
+                >
+                  <button
+                    class="border-box inherit-box border-0 d-flex flex-column justify-content-center align-items-center c-map-button c-map-button--lg btn btn-outline-primary btn-lg"
+                    disabled=""
+                    title="Undo"
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="bi bi-arrow-left-square"
+                      fill="currentColor"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm11.5 5.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                    <span
+                      class="mt-1"
+                    >
+                      Undo
+                    </span>
+                  </button>
+                </div>
+                <div
+                  class="leaflet-control leaflet-bar"
+                >
+                  <button
+                    class="border-box inherit-box border-0 d-flex flex-column justify-content-center align-items-center c-map-button c-map-button--lg btn btn-outline-primary btn-lg"
+                    disabled=""
+                    title="Clear"
+                    type="button"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="bi bi-x-square"
+                      fill="currentColor"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"
+                      />
+                      <path
+                        d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"
+                      />
+                    </svg>
+                    <span
+                      class="mt-1"
+                    >
+                      Clear
+                    </span>
+                  </button>
+                </div>
+              </div>
+              <div
+                class="leaflet-bottom leaflet-right"
+              >
+                <div
+                  class="leaflet-control-attribution leaflet-control"
+                >
+                  © 
+                  <a
+                    href="http://osm.org/copyright"
+                  >
+                    OpenStreetMap
+                  </a>
+                   contributors
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  </div>
+</body>
+`;
+
+exports[`Detours Page: Open a Detour renders detour details in an open drawer on mobile 1`] = `
+<body
+  data-rr-ui-modal-open=""
+  style="padding-right: 2048px;"
+>
+  <div>
+    <div
+      class="c-detour-list-page h-100 overflow-y-auto p-0 p-md-4 bg-white"
+    >
+      <button
+        class="c-detour-list-page__button icon-link fw-light px-3 py-2 u-hide-for-mobile btn btn-primary"
+        type="button"
+      >
+        <svg
+          aria-hidden="true"
+          class="bi bi-plus-square"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"
+          />
+          <path
+            d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__button-text"
+        >
+          Add detour
+        </span>
+      </button>
+      <div
+        class="d-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+      >
+        <h2
+          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        >
+          Active detours
+        </h2>
+        <svg
+          aria-hidden="true"
+          class="c-detour-list-page__header-icon my-auto me-1"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0M2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484q-.121.12-.242.234c-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__header-visibility my-auto"
+        >
+          All Skate users
+        </span>
+      </div>
+      <table
+        class="mb-5 c-detours-table table table-active-detour table-hover"
+      >
+        <thead
+          class="u-hide-for-mobile"
+        >
+          <tr>
+            <th
+              class="px-3 py-4"
+            >
+              Route and direction
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Starting Intersection
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              On detour since
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td
+              class="align-middle p-3"
+            >
+              <div
+                class="d-flex"
+              >
+                <div
+                  class="c-route-pill c-route-pill--bus"
+                >
+                  7
+                </div>
+                <div
+                  class="c-detours-table__route-info-text d-inline-block"
+                >
+                  <div
+                    class="pb-1 fs-4 fw-semibold"
+                  >
+                    Headsign 7
+                  </div>
+                  <div
+                    class="c-detours-table__route-info-direction fs-6"
+                  >
+                    Inbound
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              Street A7 & Avenue B7
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              26 hours ago
+            </td>
+          </tr>
+          <tr>
+            <td
+              class="align-middle p-3"
+            >
+              <div
+                class="d-flex"
+              >
+                <div
+                  class="c-route-pill c-route-pill--bus"
+                >
+                  8
+                </div>
+                <div
+                  class="c-detours-table__route-info-text d-inline-block"
+                >
+                  <div
+                    class="pb-1 fs-4 fw-semibold"
+                  >
+                    Headsign 8
+                  </div>
+                  <div
+                    class="c-detours-table__route-info-direction fs-6"
+                  >
+                    Outbound
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              Street A8 & Avenue B8
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              26 hours ago
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+      >
+        <h2
+          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        >
+          Draft detours
+        </h2>
+        <svg
+          aria-hidden="true"
+          class="c-detour-list-page__header-icon my-auto me-1"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2m3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__header-visibility my-auto"
+        >
+          Only you
+        </span>
+      </div>
+      <table
+        class="mb-5 u-hide-for-mobile c-detours-table table"
+      >
+        <thead
+          class="u-hide-for-mobile"
+        >
+          <tr>
+            <th
+              class="px-3 py-4"
+            >
+              Route and direction
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Starting Intersection
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Last edited
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            aria-hidden="true"
+          >
+            <td
+              class="p-3 p-md-4"
+              colspan="3"
+            >
+              <div
+                class="d-flex justify-content-center mb-3"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="bi"
+                  fill="none"
+                  height="100px"
+                  viewBox="0 0 101 97"
+                  width="100px"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M50.7593 96.3069C78.7676 95.6159 101.216 73.7201 100.483 47.9743C99.7264 21.4318 77.8338 0.0142709 50.2246 0.154493C22.6152 0.29649 0.353077 21.9361 0.50073 48.4878C0.648383 75.0396 23.1499 96.4489 50.7593 96.3069Z"
+                    fill="#DBDDE1"
+                  />
+                  <path
+                    clip-rule="evenodd"
+                    d="M77.8546 42.8941L75.109 22.182C74.4117 18.4448 71.9552 16.9864 68.3003 15.457C62.3115 13.3999 55.9969 12.29 49.6168 12.173C43.2269 12.2913 36.9025 13.4011 30.9028 15.457C27.2934 16.9576 24.8367 18.4442 24.0937 22.1814L21.3335 42.8941V71.5485H26.1788V76.5389C26.1854 78.5889 27.9643 80.2491 30.1604 80.2547C32.3563 80.2487 34.1348 78.5884 34.1413 76.5385V71.5481H65.1922V76.5385C65.1818 77.8726 65.9382 79.1096 67.1742 79.7796C68.4101 80.4495 69.9359 80.4495 71.1719 79.7796C72.4079 79.1096 73.1643 77.8726 73.1538 76.5385V71.5481H77.8552L77.8546 42.8941ZM37.9849 17.4111H61.3396C62.328 17.4111 63.1292 18.1591 63.1292 19.0817C63.1292 20.0044 62.328 20.7523 61.3396 20.7523H37.9849C36.9965 20.7523 36.1953 20.0044 36.1953 19.0817C36.1953 18.1591 36.9965 17.4111 37.9849 17.4111ZM28.6269 25.9337L26.3532 42.2854C26.323 42.4731 26.323 42.6639 26.3532 42.8517C26.3241 43.4151 26.5364 43.9662 26.9433 44.3832C27.3502 44.8002 27.9182 45.0489 28.5218 45.0743H70.8784C71.481 45.0804 72.061 44.8605 72.4884 44.4639C72.9158 44.0674 73.1549 43.5273 73.1521 42.9648V42.8517C73.1826 42.664 73.1826 42.4731 73.1521 42.2854L70.8784 25.9337C70.6956 24.9045 69.7364 24.1533 68.6189 24.1642H30.9006C29.7801 24.153 28.8166 24.9028 28.6269 25.9337ZM30.1604 62.6858C27.8195 62.6898 25.9183 60.9216 25.9139 58.7363C25.9096 56.551 27.8036 54.7762 30.1445 54.772C32.4854 54.7678 34.3868 56.5358 34.3914 58.7211C34.3943 59.7708 33.95 60.7786 33.1563 61.5223C32.3627 62.266 31.2849 62.6846 30.1604 62.6858ZM64.9351 58.7263C64.9335 60.9096 66.8266 62.6815 69.1654 62.6858H69.1648C70.2922 62.6887 71.3743 62.272 72.1716 61.5278C72.9688 60.7837 73.4154 59.7735 73.4125 58.7211C73.4079 56.5378 71.5098 54.7705 69.171 54.772C66.8322 54.7734 64.9366 56.543 64.9351 58.7263Z"
+                    fill="#1C1E23"
+                    fill-rule="evenodd"
+                  />
+                </svg>
+              </div>
+              <div
+                class="d-flex justify-content-center"
+              >
+                <p
+                  class="fs-3 fw-light m-0"
+                >
+                  No draft detours.
+                </p>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <div
+        class="u-hide-for-mobile d-md-flex mt-3 mt-md-0 mb-3 mx-3 mx-md-0"
+      >
+        <h2
+          class="my-auto fw-semibold fs-1 me-3 text-nowrap"
+        >
+          Closed detours
+        </h2>
+        <svg
+          aria-hidden="true"
+          class="c-detour-list-page__header-icon my-auto me-1"
+          fill="currentColor"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"
+          />
+        </svg>
+        <span
+          class="c-detour-list-page__header-visibility my-auto"
+        >
+          Dispatchers and supervisors
+        </span>
+      </div>
+      <table
+        class="u-hide-for-mobile c-detours-table table table-hover"
+      >
+        <thead
+          class="u-hide-for-mobile"
+        >
+          <tr>
+            <th
+              class="px-3 py-4"
+            >
+              Route and direction
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Starting Intersection
+            </th>
+            <th
+              class="px-3 py-4 u-hide-for-mobile"
+            >
+              Last used
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td
+              class="align-middle p-3"
+            >
+              <div
+                class="d-flex"
+              >
+                <div
+                  class="c-route-pill c-route-pill--bus"
+                >
+                  9
+                </div>
+                <div
+                  class="c-detours-table__route-info-text d-inline-block"
+                >
+                  <div
+                    class="pb-1 fs-4 fw-semibold"
+                  >
+                    Headsign Z
+                  </div>
+                  <div
+                    class="c-detours-table__route-info-direction fs-6"
+                  >
+                    Inbound
+                  </div>
+                </div>
+              </div>
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              Street A9 & Avenue B9
+            </td>
+            <td
+              class="align-middle p-3 u-hide-for-mobile"
+            >
+              26 hours ago
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </div>
+  <div />
+  <div
+    aria-modal="true"
+    class="c-detour-modal c-detour-modal__transition-appear c-detour-modal__transition-appear-active"
+    role="dialog"
+    tabindex="-1"
+  >
+    <article
+      class="l-diversion-page l-diversion-page--mobile h-100 border-box inherit-box"
+    >
+      <header
+        class="l-diversion-page__header border-bottom text-bg-light"
+      >
+        <div
+          class="flex-grow-1 fw-semibold text-center"
+        >
+          Detours
+        </div>
+        <button
+          aria-label="Close"
+          class="btn-close p-4"
+          type="button"
+        />
+      </header>
+      <div
+        class="l-diversion-page__panel text-bg-light"
+      >
+        <div
+          class="c-drawer c-drawer--visible"
+        >
+          <button
+            class="c-drawer-tab c-drawer-tab__tab-button"
+            title="Collapse"
+          >
+            <span>
+              <svg />
+            </span>
+          </button>
+          <article
+            class="l-diversion-page-panel border-end"
+          >
+            <header
+              class="l-diversion-page-panel__header border-bottom px-3"
+            >
+              <h1
+                class="c-diversion-panel__h1 my-3"
+              >
+                Share Detour Details
+              </h1>
+            </header>
+            <div
+              class="l-diversion-page-panel__body bg-light d-flex flex-column"
+            >
+              <div
+                class="l-diversion-page-panel__scroll-area px-3 d-flex flex-column"
+              >
+                <button
+                  class="align-self-start icon-link my-3 btn btn-outline-primary"
+                  type="button"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="bi bi-arrow-left"
+                    fill="currentColor"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8"
+                      fill-rule="evenodd"
+                    />
+                  </svg>
+                   Edit Detour
+                </button>
+                <textarea
+                  class="flex-grow-1 mb-3 form-control"
+                  style="resize: none;"
+                />
+              </div>
+              <div
+                class="border-top d-flex mt-auto d-flex flex-column"
+              >
+                <button
+                  class="m-3 flex-grow-1 btn btn-primary"
+                  type="button"
+                >
+                  Copy Details
+                </button>
+              </div>
+            </div>
+          </article>
+        </div>
+        <button
+          class="c-drawer__backdrop-button"
+        />
+      </div>
+      <div
+        class="l-diversion-page__map position-relative"
+      >
+        <div
+          class="fade position-absolute top-0 left-0 m-2 icon-link z-1 alert alert-info show"
+          role="alert"
+        >
+          <svg
+            aria-hidden="true"
+            class="bi bi-exclamation-circle-fill"
+            fill="currentColor"
+            height="16"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2"
+            />
+          </svg>
+          Detour shape is not editable from this screen.
+        </div>
+        <div
+          class="h-100"
+        >
+          <div
+            class="c-vehicle-map-state"
+          />
+          <div
+            class="c-vehicle-map leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+            id="id-vehicle-map"
+            style="position: relative;"
+            tabindex="0"
+          >
+            <div
+              class="leaflet-pane leaflet-map-pane"
+              style="left: 0px; top: 0px;"
+            >
+              <div
+                class="leaflet-pane leaflet-tile-pane"
+              >
+                <div
+                  class="leaflet-layer "
+                  style="z-index: 1;"
+                >
+                  <div
+                    class="leaflet-tile-container leaflet-zoom-animated"
+                    style="z-index: 21; left: 0px; top: 0px;"
+                  >
+                    <img
+                      alt=""
+                      class="leaflet-tile"
+                      src="undefined"
+                      style="width: 256px; height: 256px; left: -4px; top: -239px;"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                class="leaflet-pane leaflet-overlay-pane"
+              >
+                <svg
+                  height="0"
+                  pointer-events="none"
+                  style="left: 0px; top: 0px;"
+                  viewBox="0 0 0 0"
+                  width="0"
+                >
+                  <g>
+                    <path
+                      class="c-detour_map--detour-route-shape"
+                      d="M0 0"
+                      fill="none"
+                      stroke="#3388ff"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-opacity="1"
+                      stroke-width="6"
+                    />
+                    <path
+                      class="c-detour_map--original-route-shape-core"
+                      d="M0 0"
+                      fill="none"
+                      stroke="#3388ff"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-opacity="1"
+                      stroke-width="6"
+                    />
+                  </g>
+                </svg>
+              </div>
+              <div
+                class="leaflet-pane leaflet-shadow-pane"
+              />
+              <div
+                class="leaflet-pane leaflet-marker-pane"
+              >
+                <div
+                  class="leaflet-pane leaflet-primaryVehicles-pane"
+                  style="z-index: 499;"
+                />
+                <div
+                  class="leaflet-pane leaflet-secondaryVehicles-pane"
+                  style="z-index: 400;"
+                />
+                <div
+                  class="leaflet-pane leaflet-notableLocationMarkers-pane"
+                  style="z-index: 410;"
+                />
+                <div
+                  class="leaflet-marker-icon leaflet-zoom-hide"
+                  role="button"
+                  style="margin-left: -8px; margin-top: -8px; width: 16px; height: 16px; left: 0px; top: -1px; z-index: -1;"
+                  tabindex="0"
+                  title="Detour Start"
+                >
+                  <div
+                    class="w-100 h-100"
+                  >
+                    <svg
+                      class="c-detour_map-circle-marker--start"
+                      height="100%"
+                      viewBox="0 0 16 16"
+                      width="100%"
+                    >
+                      <circle
+                        cx="8"
+                        cy="8"
+                        opacity="0.5"
+                        r="7.5"
+                      />
+                      <circle
+                        cx="8"
+                        cy="8"
+                        r="6"
+                        stroke="white"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="leaflet-marker-icon leaflet-zoom-hide"
+                  role="button"
+                  style="margin-left: -5px; margin-top: -5px; width: 10px; height: 10px; left: 0px; top: -1px; z-index: -1;"
+                  tabindex="0"
+                >
+                  <div
+                    class="w-100 h-100"
+                  >
+                    <svg
+                      class="c-detour_map-circle-marker--detour-point"
+                      fill="none"
+                      height="100%"
+                      viewBox="0 0 10 10"
+                      width="100%"
+                    >
+                      <circle
+                        cx="5"
+                        cy="5"
+                        r="4.5"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="leaflet-marker-icon leaflet-zoom-hide"
+                  role="button"
+                  style="margin-left: -8px; margin-top: -8px; width: 16px; height: 16px; left: 0px; top: -1px; z-index: -1;"
+                  tabindex="0"
+                  title="Detour End"
+                >
+                  <div
+                    class="w-100 h-100"
+                  >
+                    <svg
+                      class="c-detour_map-circle-marker--end"
+                      height="100%"
+                      viewBox="0 0 16 16"
+                      width="100%"
+                    >
+                      <circle
+                        cx="8"
+                        cy="8"
+                        opacity="0.5"
+                        r="7.5"
+                      />
+                      <circle
+                        cx="8"
+                        cy="8"
+                        r="6"
+                        stroke="white"
+                        stroke-width="2"
+                      />
+                    </svg>
+                  </div>
+                </div>
+                <div
+                  class="leaflet-marker-icon c-stop-icon-container c-vehicle-map__stop leaflet-zoom-hide leaflet-interactive"
+                  role="button"
+                  style="margin-left: -7px; margin-top: -7px; width: 14px; height: 14px; left: 0px; top: -1px; z-index: -1;"
+                  tabindex="0"
+                >
+                  <div
+                    class="w-100 h-100"
+                  >
+                    <svg
+                      class="c-stop-icon"
+                      height="100%"
+                      width="100%"
+                    >
+                      <svg
+                        fill="none"
+                        viewBox="0 0 14 14"
+                      >
+                        <circle
+                          class="c-stop-icon__focus-circle"
+                          cx="7"
+                          cy="7"
+                          r="8"
+                        />
+                        <circle
+                          class="c-stop-icon__circle c-stop-icon__circle--small"
+                          cx="7"
+                          cy="7"
+                          r="5"
+                        />
+                      </svg>
+                    </svg>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="leaflet-pane leaflet-tooltip-pane"
+              />
+              <div
+                class="leaflet-pane leaflet-popup-pane"
+              />
+            </div>
+            <div
+              class="leaflet-control-container"
+            >
+              <div
+                class="leaflet-top leaflet-left"
+              />
+              <div
+                class="leaflet-top leaflet-right"
+              >
+                <div
+                  class="leaflet-control-zoom leaflet-bar leaflet-control"
+                >
+                  <a
+                    aria-disabled="false"
+                    aria-label="Zoom in"
+                    class="leaflet-control-zoom-in"
+                    href="#"
+                    role="button"
+                    title="Zoom in"
+                  >
+                    <span
+                      aria-hidden="true"
+                    >
+                      +
+                    </span>
+                  </a>
+                  <a
+                    aria-disabled="false"
+                    aria-label="Zoom out"
+                    class="leaflet-control-zoom-out"
+                    href="#"
+                    role="button"
+                    title="Zoom out"
+                  >
+                    <span
+                      aria-hidden="true"
+                    >
+                      −
+                    </span>
+                  </a>
+                </div>
+                <div
+                  class="leaflet-bar leaflet-control"
+                >
+                  <a
+                    aria-label="Full Screen"
+                    class="leaflet-control-zoom-fullscreen fullscreen-icon"
+                    href="#"
+                    role="button"
+                    title="Full Screen"
+                  />
+                </div>
+              </div>
+              <div
+                class="leaflet-bottom leaflet-left"
+              />
+              <div
+                class="leaflet-bottom leaflet-right"
+              >
+                <div
+                  class="leaflet-control-attribution leaflet-control"
+                >
+                  © 
+                  <a
+                    href="http://osm.org/copyright"
+                  >
+                    OpenStreetMap
+                  </a>
+                   contributors
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  </div>
+</body>
+`;
+
 exports[`Detours Page: Open a Detour renders detour details modal to match mocked fetchDetour 1`] = `
 <body
   data-rr-ui-modal-open=""
@@ -379,7 +2122,7 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
           >
             Last edited
           </strong>
-          35 hours ago
+          26 hours ago
         </span>
         <span
           class="l-diversion-page__header-details"
diff --git a/assets/tests/components/detours/detoursListPage.openDetour.test.tsx b/assets/tests/components/detours/detoursListPage.openDetour.test.tsx
index 4d315d9bc..9500e14cd 100644
--- a/assets/tests/components/detours/detoursListPage.openDetour.test.tsx
+++ b/assets/tests/components/detours/detoursListPage.openDetour.test.tsx
@@ -10,14 +10,11 @@ import userEvent from "@testing-library/user-event"
 import { DetourListPage } from "../../../src/components/detourListPage"
 import { fetchDetour, fetchDetours } from "../../../src/api"
 import { Ok } from "../../../src/util/result"
-import { neverPromise } from "../../testHelpers/mockHelpers"
-import { createActor } from "xstate"
-import { createDetourMachine } from "../../../src/models/createDetourMachine"
-import { originalRouteFactory } from "../../factories/originalRouteFactory"
-import { shapePointFactory } from "../../factories/shapePointFactory"
+import { mockScreenSize, neverPromise } from "../../testHelpers/mockHelpers"
 import getTestGroups from "../../../src/userTestGroups"
 import { detourListFactory } from "../../factories/detourListFactory"
 import { TestGroups } from "../../../src/userInTestGroup"
+import { detourStateMachineFactory } from "../../factories/detourStateMachineFactory"
 
 jest
   .useFakeTimers({ doNotFake: ["setTimeout"] })
@@ -46,33 +43,12 @@ describe("Detours Page: Open a Detour", () => {
   test("renders detour details modal to match mocked fetchDetour", async () => {
     jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build()))
 
-    // Stub out a detour machine, and start a detour-in-progress
-    const machine = createActor(createDetourMachine, {
-      input: originalRouteFactory.build(),
-    }).start()
-    machine.send({
-      type: "detour.edit.place-waypoint-on-route",
-      location: shapePointFactory.build(),
-    })
-    machine.send({
-      type: "detour.edit.place-waypoint",
-      location: shapePointFactory.build(),
-    })
-    machine.send({
-      type: "detour.edit.place-waypoint-on-route",
-      location: shapePointFactory.build(),
-    })
-    machine.send({ type: "detour.edit.done" })
-
-    const snapshot = machine.getPersistedSnapshot()
-    machine.stop()
-
     // Return the state of the machine as the fetchDetour mocked value,
     // even if it doesn't match the detour clicked
     jest
       .mocked(fetchDetour)
       .mockResolvedValue(
-        Ok({ updatedAt: 1724834480, author: "fake@email.com", state: snapshot })
+        Ok(detourStateMachineFactory.build())
       )
 
     const { baseElement } = render(<DetourListPage />)
@@ -88,4 +64,40 @@ describe("Detours Page: Open a Detour", () => {
     // Finally, check snapshot
     await waitFor(() => expect(baseElement).toMatchSnapshot())
   })
+
+  test("renders detour details in an open drawer on mobile", async () => {
+    mockScreenSize("mobile")
+
+    jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build()))
+
+    jest
+      .mocked(fetchDetour)
+      .mockResolvedValue(
+        Ok(detourStateMachineFactory.build())
+      )
+
+    const { baseElement } = render(<DetourListPage />)
+
+    await userEvent.click(await screen.findByText("Headsign Z"))
+
+    await waitFor(() => expect(baseElement).toMatchSnapshot())
+  })
+
+  test("detour details drawer is collapsible on mobile", async () => {
+    mockScreenSize("mobile")
+
+    jest.mocked(fetchDetours).mockResolvedValue(Ok(detourListFactory.build()))
+
+    jest
+      .mocked(fetchDetour)
+      .mockResolvedValue(
+        Ok(detourStateMachineFactory.build())
+      )
+
+    const { baseElement } = render(<DetourListPage />)
+
+    await userEvent.click(await screen.findByText("Headsign Z"))
+    await userEvent.click(await screen.findByTitle("Collapse"))
+    await waitFor(() => expect(baseElement).toMatchSnapshot())
+  })
 })

+ Route and direction +	+ Starting Intersection +	+ On detour since +
+ + + 10 + + + + Headsign 10 + + + Inbound + + + +	+ Street A10 & Avenue B10 +	+ 26 hours ago +
+ + + 11 + + + + Headsign 11 + + + Outbound + + + +	+ Street A11 & Avenue B11 +	+ 26 hours ago +
+ Route and direction +	+ Starting Intersection +	+ On detour since +
+ + + 7 + + + + Headsign 7 + + + Inbound + + + +	+ Street A7 & Avenue B7 +	+ 26 hours ago +
+ + + 8 + + + + Headsign 8 + + + Outbound + + + +	+ Street A8 & Avenue B8 +	+ 26 hours ago +