diff --git a/assets/tests/components/__snapshots__/mapPage.test.tsx.snap b/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
index 7824800e9..aec1bb37f 100644
--- a/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/mapPage.test.tsx.snap
@@ -1517,21 +1517,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -57px; top: 1295px; z-index: 1295;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Albany
-                    </text>
-                  </svg>
-                </div>
+                    Albany
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1547,21 +1543,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -2115px; top: 3617px; z-index: 3617;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Arborway
-                    </text>
-                  </svg>
-                </div>
+                    Arborway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1577,21 +1569,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 273px; top: 1319px; z-index: 1319;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Cabot
-                    </text>
-                  </svg>
-                </div>
+                    Cabot
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1607,21 +1595,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -456px; top: -1720px; z-index: -1720;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Charlestown and Somerville
-                    </text>
-                  </svg>
-                </div>
+                    Charlestown and Somerville
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1637,21 +1621,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -1173px; top: -3823px; z-index: -3823;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Fellsway
-                    </text>
-                  </svg>
-                </div>
+                    Fellsway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1667,21 +1647,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 4158px; top: -5947px; z-index: -5947;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Lynn
-                    </text>
-                  </svg>
-                </div>
+                    Lynn
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1697,21 +1673,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -3032px; top: -2266px; z-index: -2266;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      North Cambridge
-                    </text>
-                  </svg>
-                </div>
+                    North Cambridge
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1727,21 +1699,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 2539px; top: 6390px; z-index: 6390;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Quincy
-                    </text>
-                  </svg>
-                </div>
+                    Quincy
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1757,21 +1725,17 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -65px; top: 1854px; z-index: 1854;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Southampton
-                    </text>
-                  </svg>
-                </div>
+                    Southampton
+                  </text>
+                </svg>
               </div>
             </div>
             <div
@@ -1780,22 +1744,18 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 1027;"
               tabindex="0"
             >
-              <div
-                class="w-100 h-100"
+              <svg
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class="on-time early-red selected"
-                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                    transform="scale(1) rotate(33) translate(-12, -12)"
-                  />
-                </svg>
-              </div>
+                <path
+                  class="on-time early-red selected"
+                  d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                  transform="scale(1) rotate(33) translate(-12, -12)"
+                />
+              </svg>
             </div>
             <div
               class="leaflet-marker-icon c-vehicle-map__label primary selected leaflet-zoom-hide leaflet-interactive"
@@ -1803,32 +1763,28 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 1027;"
               tabindex="0"
             >
-              <div
-                class="w-100 h-100"
+              <svg
+                height="16"
+                viewBox="0 0 40 16"
+                width="40"
               >
-                <svg
-                  height="16"
-                  viewBox="0 0 40 16"
-                  width="40"
+                <rect
+                  class="c-vehicle-icon__label-background"
+                  height="100%"
+                  rx="5.5px"
+                  ry="5.5px"
+                  width="100%"
+                />
+                <text
+                  class="c-vehicle-icon__label"
+                  dominant-baseline="central"
+                  text-anchor="middle"
+                  x="50%"
+                  y="50%"
                 >
-                  <rect
-                    class="c-vehicle-icon__label-background"
-                    height="100%"
-                    rx="5.5px"
-                    ry="5.5px"
-                    width="100%"
-                  />
-                  <text
-                    class="c-vehicle-icon__label"
-                    dominant-baseline="central"
-                    text-anchor="middle"
-                    x="50%"
-                    y="50%"
-                  >
-                    1
-                  </text>
-                </svg>
-              </div>
+                  1
+                </text>
+              </svg>
             </div>
             <div
               class="leaflet-marker-icon c-vehicle-map__icon leaflet-zoom-hide leaflet-interactive"
@@ -1836,22 +1792,18 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 27; z-index: 27;"
               tabindex="0"
             >
-              <div
-                class="w-100 h-100"
+              <svg
+                height="24"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
               >
-                <svg
-                  height="24"
-                  viewBox="0 0 24 24"
-                  width="24"
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <path
-                    class="on-time early-red"
-                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                    transform="scale(0.8) rotate(33) translate(-12, -12)"
-                  />
-                </svg>
-              </div>
+                <path
+                  class="on-time early-red"
+                  d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                  transform="scale(0.8) rotate(33) translate(-12, -12)"
+                />
+              </svg>
             </div>
             <div
               class="leaflet-marker-icon c-vehicle-map__label secondary leaflet-zoom-hide leaflet-interactive"
@@ -1859,32 +1811,28 @@ exports[`<MapPage /> Snapshot renders vehicle data 1`] = `
               style="margin-left: -15px; margin-top: 10px; width: 12px; height: 12px; left: 223px; top: 27px; z-index: 27; z-index: 27;"
               tabindex="0"
             >
-              <div
-                class="w-100 h-100"
+              <svg
+                height="12"
+                viewBox="0 0 30 12"
+                width="30"
               >
-                <svg
-                  height="12"
-                  viewBox="0 0 30 12"
-                  width="30"
+                <rect
+                  class="c-vehicle-icon__label-background"
+                  height="100%"
+                  rx="5.5px"
+                  ry="5.5px"
+                  width="100%"
+                />
+                <text
+                  class="c-vehicle-icon__label"
+                  dominant-baseline="central"
+                  text-anchor="middle"
+                  x="50%"
+                  y="50%"
                 >
-                  <rect
-                    class="c-vehicle-icon__label-background"
-                    height="100%"
-                    rx="5.5px"
-                    ry="5.5px"
-                    width="100%"
-                  />
-                  <text
-                    class="c-vehicle-icon__label"
-                    dominant-baseline="central"
-                    text-anchor="middle"
-                    x="50%"
-                    y="50%"
-                  >
-                    2
-                  </text>
-                </svg>
-              </div>
+                  2
+                </text>
+              </svg>
             </div>
           </div>
           <div
diff --git a/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap b/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap
index a0b8c8fb6..a5913c6dc 100644
--- a/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap
+++ b/assets/tests/components/__snapshots__/shuttleMapPage.test.tsx.snap
@@ -213,22 +213,18 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                      transform="scale(1) rotate(33) translate(-12, -12)"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    class=""
+                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                    transform="scale(1) rotate(33) translate(-12, -12)"
+                  />
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -236,32 +232,28 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
-                >
-                  <svg
-                    height="16"
-                    viewBox="0 0 40 16"
-                    width="40"
+                <svg
+                  height="16"
+                  viewBox="0 0 40 16"
+                  width="40"
+                >
+                  <rect
+                    class="c-vehicle-icon__label-background"
+                    height="100%"
+                    rx="5.5px"
+                    ry="5.5px"
+                    width="100%"
+                  />
+                  <text
+                    class="c-vehicle-icon__label"
+                    dominant-baseline="central"
+                    text-anchor="middle"
+                    x="50%"
+                    y="50%"
                   >
-                    <rect
-                      class="c-vehicle-icon__label-background"
-                      height="100%"
-                      rx="5.5px"
-                      ry="5.5px"
-                      width="100%"
-                    />
-                    <text
-                      class="c-vehicle-icon__label"
-                      dominant-baseline="central"
-                      text-anchor="middle"
-                      x="50%"
-                      y="50%"
-                    >
-                      1818
-                    </text>
-                  </svg>
-                </div>
+                    1818
+                  </text>
+                </svg>
               </div>
             </div>
             <div
@@ -286,21 +278,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -280px; top: 1268px; z-index: 1268;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Albany
-                    </text>
-                  </svg>
-                </div>
+                    Albany
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -316,21 +304,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -2338px; top: 3590px; z-index: 3590;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Arborway
-                    </text>
-                  </svg>
-                </div>
+                    Arborway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -346,21 +330,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 50px; top: 1292px; z-index: 1292;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Cabot
-                    </text>
-                  </svg>
-                </div>
+                    Cabot
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -376,21 +356,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -679px; top: -1747px; z-index: -1747;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Charlestown and Somerville
-                    </text>
-                  </svg>
-                </div>
+                    Charlestown and Somerville
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -406,21 +382,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -1396px; top: -3850px; z-index: -3850;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Fellsway
-                    </text>
-                  </svg>
-                </div>
+                    Fellsway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -436,21 +408,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 3935px; top: -5974px; z-index: -5974;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Lynn
-                    </text>
-                  </svg>
-                </div>
+                    Lynn
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -466,21 +434,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -3255px; top: -2293px; z-index: -2293;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      North Cambridge
-                    </text>
-                  </svg>
-                </div>
+                    North Cambridge
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -496,21 +460,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 2316px; top: 6363px; z-index: 6363;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Quincy
-                    </text>
-                  </svg>
-                </div>
+                    Quincy
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -526,21 +486,17 @@ exports[`Shuttle Map Page renders 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -288px; top: 1827px; z-index: 1827;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Southampton
-                    </text>
-                  </svg>
-                </div>
+                    Southampton
+                  </text>
+                </svg>
               </div>
             </div>
           </div>
@@ -964,22 +920,18 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                      transform="scale(1) rotate(33) translate(-12, -12)"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    class=""
+                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                    transform="scale(1) rotate(33) translate(-12, -12)"
+                  />
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -987,32 +939,28 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
-                >
-                  <svg
-                    height="16"
-                    viewBox="0 0 40 16"
-                    width="40"
+                <svg
+                  height="16"
+                  viewBox="0 0 40 16"
+                  width="40"
+                >
+                  <rect
+                    class="c-vehicle-icon__label-background"
+                    height="100%"
+                    rx="5.5px"
+                    ry="5.5px"
+                    width="100%"
+                  />
+                  <text
+                    class="c-vehicle-icon__label"
+                    dominant-baseline="central"
+                    text-anchor="middle"
+                    x="50%"
+                    y="50%"
                   >
-                    <rect
-                      class="c-vehicle-icon__label-background"
-                      height="100%"
-                      rx="5.5px"
-                      ry="5.5px"
-                      width="100%"
-                    />
-                    <text
-                      class="c-vehicle-icon__label"
-                      dominant-baseline="central"
-                      text-anchor="middle"
-                      x="50%"
-                      y="50%"
-                    >
-                      1818
-                    </text>
-                  </svg>
-                </div>
+                    1818
+                  </text>
+                </svg>
               </div>
             </div>
             <div
@@ -1037,21 +985,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -280px; top: 1268px; z-index: 1268;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Albany
-                    </text>
-                  </svg>
-                </div>
+                    Albany
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1067,21 +1011,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -2338px; top: 3590px; z-index: 3590;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Arborway
-                    </text>
-                  </svg>
-                </div>
+                    Arborway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1097,21 +1037,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 50px; top: 1292px; z-index: 1292;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Cabot
-                    </text>
-                  </svg>
-                </div>
+                    Cabot
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1127,21 +1063,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -679px; top: -1747px; z-index: -1747;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Charlestown and Somerville
-                    </text>
-                  </svg>
-                </div>
+                    Charlestown and Somerville
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1157,21 +1089,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -1396px; top: -3850px; z-index: -3850;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Fellsway
-                    </text>
-                  </svg>
-                </div>
+                    Fellsway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1187,21 +1115,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 3935px; top: -5974px; z-index: -5974;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Lynn
-                    </text>
-                  </svg>
-                </div>
+                    Lynn
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1217,21 +1141,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -3255px; top: -2293px; z-index: -2293;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      North Cambridge
-                    </text>
-                  </svg>
-                </div>
+                    North Cambridge
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1247,21 +1167,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 2316px; top: 6363px; z-index: 6363;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Quincy
-                    </text>
-                  </svg>
-                </div>
+                    Quincy
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1277,21 +1193,17 @@ exports[`Shuttle Map Page renders selected shuttle routes 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -288px; top: 1827px; z-index: 1827;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Southampton
-                    </text>
-                  </svg>
-                </div>
+                    Southampton
+                  </text>
+                </svg>
               </div>
             </div>
           </div>
@@ -1715,22 +1627,18 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                      transform="scale(1) rotate(33) translate(-12, -12)"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    class=""
+                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                    transform="scale(1) rotate(33) translate(-12, -12)"
+                  />
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -1738,32 +1646,28 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
-                >
-                  <svg
-                    height="16"
-                    viewBox="0 0 40 16"
-                    width="40"
+                <svg
+                  height="16"
+                  viewBox="0 0 40 16"
+                  width="40"
+                >
+                  <rect
+                    class="c-vehicle-icon__label-background"
+                    height="100%"
+                    rx="5.5px"
+                    ry="5.5px"
+                    width="100%"
+                  />
+                  <text
+                    class="c-vehicle-icon__label"
+                    dominant-baseline="central"
+                    text-anchor="middle"
+                    x="50%"
+                    y="50%"
                   >
-                    <rect
-                      class="c-vehicle-icon__label-background"
-                      height="100%"
-                      rx="5.5px"
-                      ry="5.5px"
-                      width="100%"
-                    />
-                    <text
-                      class="c-vehicle-icon__label"
-                      dominant-baseline="central"
-                      text-anchor="middle"
-                      x="50%"
-                      y="50%"
-                    >
-                      1818
-                    </text>
-                  </svg>
-                </div>
+                    1818
+                  </text>
+                </svg>
               </div>
             </div>
             <div
@@ -1788,21 +1692,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -280px; top: 1268px; z-index: 1268;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Albany
-                    </text>
-                  </svg>
-                </div>
+                    Albany
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1818,21 +1718,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -2338px; top: 3590px; z-index: 3590;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Arborway
-                    </text>
-                  </svg>
-                </div>
+                    Arborway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1848,21 +1744,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 50px; top: 1292px; z-index: 1292;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Cabot
-                    </text>
-                  </svg>
-                </div>
+                    Cabot
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1878,21 +1770,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -679px; top: -1747px; z-index: -1747;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Charlestown and Somerville
-                    </text>
-                  </svg>
-                </div>
+                    Charlestown and Somerville
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1908,21 +1796,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -1396px; top: -3850px; z-index: -3850;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Fellsway
-                    </text>
-                  </svg>
-                </div>
+                    Fellsway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1938,21 +1822,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 3935px; top: -5974px; z-index: -5974;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Lynn
-                    </text>
-                  </svg>
-                </div>
+                    Lynn
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1968,21 +1848,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -3255px; top: -2293px; z-index: -2293;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      North Cambridge
-                    </text>
-                  </svg>
-                </div>
+                    North Cambridge
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -1998,21 +1874,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 2316px; top: 6363px; z-index: 6363;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Quincy
-                    </text>
-                  </svg>
-                </div>
+                    Quincy
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -2028,21 +1900,17 @@ exports[`Shuttle Map Page renders with all shuttles selected 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -288px; top: 1827px; z-index: 1827;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Southampton
-                    </text>
-                  </svg>
-                </div>
+                    Southampton
+                  </text>
+                </svg>
               </div>
             </div>
           </div>
@@ -2775,22 +2643,18 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 0px; margin-top: 0px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
                 >
-                  <svg
-                    height="24"
-                    viewBox="0 0 24 24"
-                    width="24"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      class=""
-                      d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
-                      transform="scale(1) rotate(33) translate(-12, -12)"
-                    />
-                  </svg>
-                </div>
+                  <path
+                    class=""
+                    d="m10 2.7-6.21 16.94a2.33 2.33 0 0 0 1.38 3 2.36 2.36 0 0 0 1.93-.14l4.9-2.67 4.89 2.71a2.34 2.34 0 0 0 3.34-2.8l-5.81-17a2.34 2.34 0 0 0 -4.4 0z"
+                    transform="scale(1) rotate(33) translate(-12, -12)"
+                  />
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-vehicle-map__label primary leaflet-zoom-hide leaflet-interactive"
@@ -2798,32 +2662,28 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: -20px; margin-top: 16px; width: 12px; height: 12px; left: 0px; top: 0px; z-index: 0;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
-                >
-                  <svg
-                    height="16"
-                    viewBox="0 0 40 16"
-                    width="40"
+                <svg
+                  height="16"
+                  viewBox="0 0 40 16"
+                  width="40"
+                >
+                  <rect
+                    class="c-vehicle-icon__label-background"
+                    height="100%"
+                    rx="5.5px"
+                    ry="5.5px"
+                    width="100%"
+                  />
+                  <text
+                    class="c-vehicle-icon__label"
+                    dominant-baseline="central"
+                    text-anchor="middle"
+                    x="50%"
+                    y="50%"
                   >
-                    <rect
-                      class="c-vehicle-icon__label-background"
-                      height="100%"
-                      rx="5.5px"
-                      ry="5.5px"
-                      width="100%"
-                    />
-                    <text
-                      class="c-vehicle-icon__label"
-                      dominant-baseline="central"
-                      text-anchor="middle"
-                      x="50%"
-                      y="50%"
-                    >
-                      1818
-                    </text>
-                  </svg>
-                </div>
+                    1818
+                  </text>
+                </svg>
               </div>
             </div>
             <div
@@ -2877,21 +2737,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -280px; top: 1268px; z-index: 1268;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Albany
-                    </text>
-                  </svg>
-                </div>
+                    Albany
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -2907,21 +2763,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -2338px; top: 3590px; z-index: 3590;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Arborway
-                    </text>
-                  </svg>
-                </div>
+                    Arborway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -2937,21 +2789,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 50px; top: 1292px; z-index: 1292;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Cabot
-                    </text>
-                  </svg>
-                </div>
+                    Cabot
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -2967,21 +2815,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -679px; top: -1747px; z-index: -1747;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Charlestown and Somerville
-                    </text>
-                  </svg>
-                </div>
+                    Charlestown and Somerville
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -2997,21 +2841,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -1396px; top: -3850px; z-index: -3850;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Fellsway
-                    </text>
-                  </svg>
-                </div>
+                    Fellsway
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -3027,21 +2867,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 3935px; top: -5974px; z-index: -5974;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Lynn
-                    </text>
-                  </svg>
-                </div>
+                    Lynn
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -3057,21 +2893,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -3255px; top: -2293px; z-index: -2293;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      North Cambridge
-                    </text>
-                  </svg>
-                </div>
+                    North Cambridge
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -3087,21 +2919,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: 2316px; top: 6363px; z-index: 6363;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Quincy
-                    </text>
-                  </svg>
-                </div>
+                    Quincy
+                  </text>
+                </svg>
               </div>
               <div
                 class="leaflet-marker-icon c-garage-icon leaflet-zoom-hide"
@@ -3117,21 +2945,17 @@ exports[`Shuttle Map Page renders with train vehicles 1`] = `
                 style="margin-left: 14px; margin-top: -25px; width: 12px; height: 12px; left: -288px; top: 1827px; z-index: 1827;"
                 tabindex="0"
               >
-                <div
-                  class="w-100 h-100"
+                <svg
+                  height="30"
+                  width="200"
                 >
-                  <svg
-                    height="30"
-                    width="200"
+                  <text
+                    x="1"
+                    y="15"
                   >
-                    <text
-                      x="1"
-                      y="15"
-                    >
-                      Southampton
-                    </text>
-                  </svg>
-                </div>
+                    Southampton
+                  </text>
+                </svg>
               </div>
             </div>
           </div>
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 55154c073..6518f0b92 100644
--- a/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
+++ b/assets/tests/components/detours/__snapshots__/detoursListPage.openDetour.test.tsx.snap
@@ -573,30 +573,26 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                   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%"
                   >
-                    <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>
+                    <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
                   class="leaflet-marker-icon leaflet-zoom-hide"
@@ -604,23 +600,19 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                   style="margin-left: -5px; margin-top: -5px; width: 10px; height: 10px; left: 0px; top: 0px; z-index: 0;"
                   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%"
                   >
-                    <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>
+                    <circle
+                      cx="5"
+                      cy="5"
+                      r="4.5"
+                    />
+                  </svg>
                 </div>
                 <div
                   class="leaflet-marker-icon leaflet-zoom-hide"
@@ -629,30 +621,26 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                   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%"
                   >
-                    <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>
+                    <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
                   class="leaflet-marker-icon c-stop-icon-container c-vehicle-map__stop leaflet-zoom-hide leaflet-interactive"
@@ -660,33 +648,29 @@ exports[`Detours Page: Open a Detour renders detour details modal to match mocke
                   style="margin-left: -7px; margin-top: -7px; width: 14px; height: 14px; left: 0px; top: 0px; z-index: 0;"
                   tabindex="0"
                 >
-                  <div
-                    class="w-100 h-100"
+                  <svg
+                    class="c-stop-icon"
+                    height="100%"
+                    width="100%"
                   >
                     <svg
-                      class="c-stop-icon"
-                      height="100%"
-                      width="100%"
+                      fill="none"
+                      viewBox="0 0 14 14"
                     >
-                      <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>
+                      <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>
-                  </div>
+                  </svg>
                 </div>
               </div>
               <div