From 0b2a585d33a25d71fe4191999edea10eb56d082e Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Wed, 6 Nov 2024 11:39:56 -0600
Subject: [PATCH 1/8] fix(pattern-viewer): fix gap in pattern buttons

---
 lib/components/viewers/styled.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/components/viewers/styled.ts b/lib/components/viewers/styled.ts
index 5509975be..9e0131c07 100644
--- a/lib/components/viewers/styled.ts
+++ b/lib/components/viewers/styled.ts
@@ -50,7 +50,7 @@ export const PatternContainer = styled.div`
   & > span {
     width: 85%;
 
-    button {
+    button#headsign-selector-label {
       align-items: center;
       display: flex;
       justify-content: space-between;

From 04d63c3996466a88ba67a867ea49fcdae7291728 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Wed, 6 Nov 2024 11:42:40 -0600
Subject: [PATCH 2/8] Fix clipping on loading spinner in narrative itineraries

---
 lib/components/narrative/loading.tsx | 2 +-
 lib/components/narrative/styled.js   | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/lib/components/narrative/loading.tsx b/lib/components/narrative/loading.tsx
index 6761eeae4..9b4749382 100644
--- a/lib/components/narrative/loading.tsx
+++ b/lib/components/narrative/loading.tsx
@@ -10,7 +10,7 @@ type Props = {
 
 const Loading = ({ extraSmall, small }: Props): JSX.Element => {
   return (
-    <div className="text-center percy-hide">
+    <div className="text-center percy-hide loading-container">
       <StyledIconWrapper size={small ? '3x' : extraSmall ? '1x' : '5x'} spin>
         <Redo />
       </StyledIconWrapper>
diff --git a/lib/components/narrative/styled.js b/lib/components/narrative/styled.js
index 9ca966693..8381eef24 100644
--- a/lib/components/narrative/styled.js
+++ b/lib/components/narrative/styled.js
@@ -14,6 +14,11 @@ export const NarrativeItinerariesContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
+
+  // Prevent the loading spinner from clipping the top of the container
+  .loading-container {
+    margin-top: 25px;
+  }
 `
 
 export const ULContainer = styled.ul`

From 1d1cd5ea9718b86666253d4a3b9d2d2d8e98e504 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Wed, 6 Nov 2024 11:46:56 -0600
Subject: [PATCH 3/8] Fix navbar spacing and positioning

---
 index.css                                |  1 -
 lib/components/app/app.css               | 68 ++++++++++++++++++++++++
 lib/components/app/desktop-nav.tsx       | 28 ++++------
 lib/components/app/nav-item.tsx          |  4 --
 lib/components/app/view-switcher.tsx     | 15 +-----
 lib/components/mobile/mobile.css         |  9 +---
 lib/components/user/nav-login-button.css |  5 --
 7 files changed, 79 insertions(+), 51 deletions(-)

diff --git a/index.css b/index.css
index 697d3b1b6..94a39b976 100644
--- a/index.css
+++ b/index.css
@@ -31,7 +31,6 @@ input[type="text"]::-ms-clear {
   height: 15px;
   justify-content: space-between;
   padding: 0;
-  position: absolute;
   top: 16px;
   transition: all 1s ease;
   width: 21px;
diff --git a/lib/components/app/app.css b/lib/components/app/app.css
index 87fe44222..efadb689d 100644
--- a/lib/components/app/app.css
+++ b/lib/components/app/app.css
@@ -47,6 +47,74 @@
   }
 }
 
+/* Navbar settings */
+
+.navbar .navbar-header {
+  display: grid;
+  grid-template-columns: 300px auto 150px;
+}
+
+.navbar .navbar-nav {
+  margin: 0;
+  grid-column: 3;
+}
+
+.navbar .navbar-brand {
+  display: flex;
+  gap: 35px;
+  align-items: center;
+  grid-column: 1 / span 1;
+  width: 100%;
+}
+
+@media (min-width: 992px) {
+  #view-switcher {
+    height: 100%;
+    left: 0;
+    position: absolute;
+    width: 100%
+  }
+}
+
+
+@media (max-width: 768px) {
+  .navbar .navbar-header {
+    grid-template-columns: 50px auto 50px;
+    width: auto !important;
+  }
+
+  .navbar .navbar-brand {
+    grid-column: 1 / span 2;
+    gap: 15px;
+    padding: 10px;
+  }
+
+  #view-switcher {
+    position: relative;
+  }
+
+}
+
+/* Mobile navbar */
+.mobile-navbar-container .navbar-header {
+  display: block;
+  grid-column: 1;
+  justify-self: center;
+  width: 25px;
+}
+
+.mobile-navbar-container .mobile-header {
+  height: 100%;
+  justify-self: center;
+}
+
+.mobile-navbar-container .container-fluid {
+  display: grid;
+  grid-template-columns: 50px auto 50px;
+  align-items: center;
+  height: 100%;
+}
+
 /* PrintLayout styles */
 
 .otp.print-layout {
diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index f9a265b86..419ee247b 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -19,8 +19,6 @@ import NavbarItem from './nav-item'
 import ViewSwitcher from './view-switcher'
 
 const StyledNav = styled(Nav)`
-  /* Almost override bootstrap's margin-right: -15px */
-  margin-right: -5px;
   /* Target only the svgs in the Navbar */
   & > li > button > svg,
   & > li > span > button > span > svg {
@@ -41,10 +39,6 @@ const StyledNav = styled(Nav)`
       padding: 15px;
       line-height: 20px;
 
-      @media (max-width: 768px) {
-        padding: 10px;
-      }
-
       &:hover {
         background: rgba(0, 0, 0, 0.05);
         color: #ececec;
@@ -99,18 +93,14 @@ const DesktopNav = ({
 
   const BrandingElement = brandClickable ? 'a' : 'div'
 
-  const commonStyles = { marginLeft: 50 }
-  const brandingProps = brandClickable
-    ? {
-        href: '/#/',
-        style: {
-          ...commonStyles,
-          display: 'block',
-          position: 'relative',
-          zIndex: 10
-        }
-      }
-    : { style: { ...commonStyles } }
+  const brandingProps = brandClickable && {
+    href: '/#/',
+    style: {
+      display: 'block',
+      position: 'relative',
+      zIndex: 10
+    }
+  }
   const popupButtonText =
     popupTarget &&
     intl.formatMessage({
@@ -142,7 +132,7 @@ const DesktopNav = ({
             )}
           </Navbar.Brand>
 
-          <ViewSwitcher sticky />
+          <ViewSwitcher />
 
           <StyledNav pullRight>
             {popupTarget && (
diff --git a/lib/components/app/nav-item.tsx b/lib/components/app/nav-item.tsx
index d6cd2f9f9..9c4c92be8 100644
--- a/lib/components/app/nav-item.tsx
+++ b/lib/components/app/nav-item.tsx
@@ -19,10 +19,6 @@ export const NavbarButton = styled.button`
   padding: 15px;
   transition: all 0.1s ease-in-out;
 
-  @media (max-width: 768px) {
-    padding: 10px;
-  }
-
   &:hover,
   &[aria-expanded='true'] {
     background: rgba(0, 0, 0, 0.05);
diff --git a/lib/components/app/view-switcher.tsx b/lib/components/app/view-switcher.tsx
index fc500f9b5..0bd47d5e8 100644
--- a/lib/components/app/view-switcher.tsx
+++ b/lib/components/app/view-switcher.tsx
@@ -3,14 +3,11 @@ import React from 'react'
 
 import Link from '../util/link'
 
-type Props = {
-  sticky?: boolean
-}
 /**
  * This component is a switcher between
  * the main views of the application.
  */
-const ViewSwitcher = ({ sticky }: Props) => {
+const ViewSwitcher = (): JSX.Element => {
   const intl = useIntl()
   return (
     <div
@@ -20,16 +17,6 @@ const ViewSwitcher = ({ sticky }: Props) => {
       className="view-switcher"
       id="view-switcher"
       role="group"
-      style={
-        sticky
-          ? {
-              height: '100%',
-              left: 0,
-              position: 'absolute',
-              width: '100%'
-            }
-          : {}
-      }
     >
       <Link to="/" tracking>
         <FormattedMessage id="components.BatchRoutingPanel.shortTitle" />
diff --git a/lib/components/mobile/mobile.css b/lib/components/mobile/mobile.css
index b1197cfbd..9685a7a52 100644
--- a/lib/components/mobile/mobile.css
+++ b/lib/components/mobile/mobile.css
@@ -20,12 +20,9 @@
 .otp .navbar .mobile-header {
   align-items: center;
   display: flex;
-  height: 50px;
+  height: 100%;
   justify-content: center;
-  left: 50px;
   max-width: 90%;
-  position: fixed;
-  right: 50px;
   text-align: center;
 }
 
@@ -68,10 +65,6 @@
   font-size: 18px;
 }
 
-.otp .navbar-brand {
-  padding: 7px 10px;
-}
-
 /* Welcome screen */
 
 .otp.mobile .welcome-location {
diff --git a/lib/components/user/nav-login-button.css b/lib/components/user/nav-login-button.css
index 3bb007cb1..bf20205d4 100644
--- a/lib/components/user/nav-login-button.css
+++ b/lib/components/user/nav-login-button.css
@@ -13,11 +13,6 @@
   min-width: 0px;
 }
 
-.otp.mobile .navbar .container-fluid .locale-selector-and-login {
-  position: fixed;
-  right: 0;
-  top: 0;
-}
 .otp.mobile .navbar .container-fluid .locale-selector-and-login > li {
   display: inline-block;
 }

From 45464f6183ddc25feee2c9ce26864d1af3b7d134 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:02:30 -0600
Subject: [PATCH 4/8] clean up view switcher and mobile styling

---
 index.css                                | 167 +-------------------
 lib/components/app/app.css               | 186 +++++++++++++++++++++--
 lib/components/mobile/mobile.css         |   3 -
 lib/components/user/nav-login-button.css |   3 +
 4 files changed, 179 insertions(+), 180 deletions(-)

diff --git a/index.css b/index.css
index 94a39b976..fe75647f8 100644
--- a/index.css
+++ b/index.css
@@ -1,5 +1,6 @@
 @import url(node_modules/bootstrap/dist/css/bootstrap.min.css);
-
+@import url(react-sliding-pane/dist/react-sliding-pane.css);
+@import url(lib/bike-rental.css);
 @import url(node_modules/maplibre-gl/dist/maplibre-gl.css);
 
 @import url(lib/components/admin/call-taker.css);
@@ -12,177 +13,13 @@
 @import url(lib/components/user/nav-login-button.css);
 @import url(lib/components/viewers/viewers.css);
 
-@import url(lib/bike-rental.css);
 
-@import url(react-sliding-pane/dist/react-sliding-pane.css);
 
 /* Hide IE/Edge clear button in text input fields. */
 input[type="text"]::-ms-clear {
   display: none;
 }
 
-/* New app menu */
-.app-menu-icon {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  height: 15px;
-  justify-content: space-between;
-  padding: 0;
-  top: 16px;
-  transition: all 1s ease;
-  width: 21px;
-  z-index: 10;
-}
-
-@media only screen and (max-width: 768px) {
-  #locale-selector-wrapper {
-    display: none;
-  }
-  .app-menu-icon {
-    left: 15px;
-  }
-}
-
-.app-menu-icon .menu-line {
-  border-bottom: 3px solid #ffffff;
-  display: block;
-  position: relative;
-  transition: all 0.5s ease;
-  width: 100%;
-}
-
-.app-menu-icon[aria-expanded="true"] .menu-line.top {
-  transform: rotate(45deg);
-  top: 7px;
-}
-.app-menu-icon[aria-expanded="true"] .menu-line.bottom {
-  transform: rotate(-45deg);
-  bottom: 5px;
-}
-.app-menu-icon[aria-expanded="true"] .menu-line.middle {
-  display: none;
-}
-
-.slide-pane {
-  transition: all 0.2s ease-in-out;
-}
-
-.slide-pane_from_left {
-  margin: 52px auto 0 0;
-  /* Keep pane from overflowing on smaller screens */
-  height: calc(100% - 52px);
-}
-
-.slide-pane__content {
-  padding: 6px 0;
-}
-
-.slide-pane__overlay {
-  z-index: 1000;
-}
-
-.app-menu {
-  margin: 0;
-  padding: 0.5rem 0;
-}
-
-.app-menu img,
-.app-menu svg {
-  max-height: 1em;
-  margin: 0 2rem;
-  vertical-align: middle;
-  width: 1em;
-}
-
-.app-menu a,
-.app-menu button {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  display: flex;
-  font-size: 20px;
-  padding: 0.5rem 0;
-  text-decoration: none;
-  width: 100%;
-}
-
-/* Prevents hover styles from getting triggered on mobile */
-@media (hover: hover) {
-  .app-menu a:hover,
-  .app-menu button:hover {
-    color: #4c97f5;
-  }
-}
-
-.app-menu a:focus,
-.app-menu button:focus {
-  background-color: #ddd;
-  outline: 2px solid #4c97f5;
-  outline-offset: -2px;
-}
-
-.app-menu button[aria-selected="true"],
-.sort-option button[aria-selected="true"],
-#locale-selector button[aria-selected="true"] {
-  font-weight: bold;
-}
-
-.skip-nav-button {
-  color: initial;
-  position: fixed;
-  top: -30px;
-}
-.skip-nav-button:focus {
-  padding: 7px 24px;
-  top: 7px;
-  z-index: 100;
-}
-
-.view-switcher {
-  display: none;
-}
-
-@media (min-width: 768px) {
-  .view-switcher {
-    display: flex;
-  }
-}
-
-.expand-menu-chevron {
-  flex-grow: 1;
-  text-align: end;
-}
-
-.dropdown-header {
-  font-size: inherit;
-  line-height: normal;
-  color: inherit;
-  white-space: nowrap;
-}
-
-.sub-menu-container {
-  border-top: 1px solid #cccccc;
-  margin-top: 0.5rem;
-  padding-left: 2rem;
-}
-
-.app-menu .app-menu-divider {
-  border-bottom: 1px solid #ccc;
-  padding: 1rem 0;
-}
-
-/* Header image or title */
-/* If an icon is used, visually-hide the title (but keep it visible to screen readers). */
-.with-icon div.navbar-title {
-  height: 0;
-  overflow: hidden;
-  width: 0;
-}
-
 /* Buttons */
 
 button.header,
diff --git a/lib/components/app/app.css b/lib/components/app/app.css
index efadb689d..4c457c138 100644
--- a/lib/components/app/app.css
+++ b/lib/components/app/app.css
@@ -67,8 +67,14 @@
   width: 100%;
 }
 
+.view-switcher {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+
 @media (min-width: 992px) {
-  #view-switcher {
+  .view-switcher {
     height: 100%;
     left: 0;
     position: absolute;
@@ -79,8 +85,9 @@
 
 @media (max-width: 768px) {
   .navbar .navbar-header {
-    grid-template-columns: 50px auto 50px;
+    grid-template-columns: 50px auto 70px;
     width: auto !important;
+
   }
 
   .navbar .navbar-brand {
@@ -89,9 +96,9 @@
     padding: 10px;
   }
 
-  #view-switcher {
-    position: relative;
-  }
+  .view-switcher {
+    display: none;
+}
 
 }
 
@@ -99,6 +106,7 @@
 .mobile-navbar-container .navbar-header {
   display: block;
   grid-column: 1;
+  grid-row: 1;
   justify-self: center;
   width: 25px;
 }
@@ -106,13 +114,172 @@
 .mobile-navbar-container .mobile-header {
   height: 100%;
   justify-self: center;
+  grid-row: 1;
+}
+
+.mobile-navbar-container .locale-selector-and-login {
+  grid-row: 1;
+  height: 50px;
+  justify-self: flex-end;
 }
 
 .mobile-navbar-container .container-fluid {
   display: grid;
-  grid-template-columns: 50px auto 50px;
+  grid-template-columns: 50px auto 70px;
+  grid-template-rows: 50px;
   align-items: center;
-  height: 100%;
+  padding: 0;
+}
+
+/* New app menu */
+.app-menu-icon {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 15px;
+  justify-content: space-between;
+  padding: 0;
+  transition: all 1s ease;
+  width: 21px;
+  z-index: 10;
+}
+
+@media only screen and (max-width: 768px) {
+  #locale-selector-wrapper {
+    display: none;
+  }
+  .app-menu-icon {
+    left: 15px;
+  }
+}
+
+.app-menu-icon .menu-line {
+  border-bottom: 3px solid #ffffff;
+  display: block;
+  position: relative;
+  transition: all 0.5s ease;
+  width: 100%;
+}
+
+.app-menu-icon[aria-expanded="true"] .menu-line.top {
+  transform: rotate(45deg);
+  top: 7px;
+}
+.app-menu-icon[aria-expanded="true"] .menu-line.bottom {
+  transform: rotate(-45deg);
+  bottom: 5px;
+}
+.app-menu-icon[aria-expanded="true"] .menu-line.middle {
+  display: none;
+}
+
+.slide-pane {
+  transition: all 0.2s ease-in-out;
+}
+
+.slide-pane_from_left {
+  margin: 52px auto 0 0;
+  /* Keep pane from overflowing on smaller screens */
+  height: calc(100% - 52px);
+}
+
+.slide-pane__content {
+  padding: 6px 0;
+}
+
+.slide-pane__overlay {
+  z-index: 1000;
+}
+
+.app-menu {
+  margin: 0;
+  padding: 0.5rem 0;
+}
+
+.app-menu img,
+.app-menu svg {
+  max-height: 1em;
+  margin: 0 2rem;
+  vertical-align: middle;
+  width: 1em;
+}
+
+.app-menu a,
+.app-menu button {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font-size: 20px;
+  padding: 0.5rem 0;
+  text-decoration: none;
+  width: 100%;
+}
+
+/* Prevents hover styles from getting triggered on mobile */
+@media (hover: hover) {
+  .app-menu a:hover,
+  .app-menu button:hover {
+    color: #4c97f5;
+  }
+}
+
+.app-menu a:focus,
+.app-menu button:focus {
+  background-color: #ddd;
+  outline: 2px solid #4c97f5;
+  outline-offset: -2px;
+}
+
+.app-menu button[aria-selected="true"],
+.sort-option button[aria-selected="true"],
+#locale-selector button[aria-selected="true"] {
+  font-weight: bold;
+}
+
+.skip-nav-button {
+  color: initial;
+  position: fixed;
+  top: -30px;
+}
+.skip-nav-button:focus {
+  padding: 7px 24px;
+  top: 7px;
+  z-index: 100;
+}
+
+.expand-menu-chevron {
+  flex-grow: 1;
+  text-align: end;
+}
+
+.dropdown-header {
+  font-size: inherit;
+  line-height: normal;
+  color: inherit;
+  white-space: nowrap;
+}
+
+.sub-menu-container {
+  border-top: 1px solid #cccccc;
+  margin-top: 0.5rem;
+  padding-left: 2rem;
+}
+
+.app-menu .app-menu-divider {
+  border-bottom: 1px solid #ccc;
+  padding: 1rem 0;
+}
+
+/* Header image or title */
+/* If an icon is used, visually-hide the title (but keep it visible to screen readers). */
+.with-icon div.navbar-title {
+  height: 0;
+  overflow: hidden;
+  width: 0;
 }
 
 /* PrintLayout styles */
@@ -137,11 +304,6 @@
 }
 
 /* View Switcher Styling */
-.view-switcher {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-}
 .view-switcher a {
   color: rgba(255, 255, 255, 0.85);
   border-radius: 15px;
diff --git a/lib/components/mobile/mobile.css b/lib/components/mobile/mobile.css
index 9685a7a52..5e07d9fd7 100644
--- a/lib/components/mobile/mobile.css
+++ b/lib/components/mobile/mobile.css
@@ -35,7 +35,6 @@
 
 @media (max-width: 768px) {
   .otp .navbar .mobile-header-text {
-    margin-top: 2px;
     word-break: break-all;
   }
 }
@@ -53,8 +52,6 @@
   border: none;
   color: white;
   font-size: 18px;
-  left: 7px;
-  position: fixed;
 }
 
 .otp .navbar .mobile-close {
diff --git a/lib/components/user/nav-login-button.css b/lib/components/user/nav-login-button.css
index bf20205d4..fcc63d9f0 100644
--- a/lib/components/user/nav-login-button.css
+++ b/lib/components/user/nav-login-button.css
@@ -45,5 +45,8 @@
   }
   #user-selector-label {
     background-color: transparent;
+    border: 0;
+    height: 50px;
+    color: white;
   }
 }

From af60baded6b3c18c0a45d00d5f1c737b0e5468bb Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:07:36 -0600
Subject: [PATCH 5/8] Sort CSS

---
 index.css                                |   8 +-
 lib/components/app/app.css               |  36 +++---
 lib/components/mobile/mobile.css         | 136 +++++++++++------------
 lib/components/user/nav-login-button.css |   8 +-
 4 files changed, 94 insertions(+), 94 deletions(-)

diff --git a/index.css b/index.css
index fe75647f8..c5a4df16f 100644
--- a/index.css
+++ b/index.css
@@ -26,12 +26,12 @@ button.header,
 button.step,
 .clear-button-formatting {
   background: transparent;
-  color: inherit;
   border: 0;
+  color: inherit;
+  margin: 0;
+  padding: 0;
   text-align: inherit;
   text-decoration: none;
-  padding: 0;
-  margin: 0;
 }
 
 .clear-button-formatting:active {
@@ -53,9 +53,9 @@ button.step {
 }
 
 .overflow-ellipsis {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .map-container .leaflet-top {
diff --git a/lib/components/app/app.css b/lib/components/app/app.css
index 4c457c138..0f1397663 100644
--- a/lib/components/app/app.css
+++ b/lib/components/app/app.css
@@ -1,8 +1,8 @@
 /* application menu styling */
 
 .app-menu-button {
-  border: none;
   background: none;
+  border: none;
   color: #fff;
   font-size: 24px;
   padding: 0px 0px;
@@ -21,10 +21,10 @@
 .app-menu .btn-default:active,
 .app-menu .open > .dropdown-toggle.btn-default:focus,
 .app-menu .open > .dropdown-toggle.btn-default {
-  color: #fff;
   background: none;
-  box-shadow: none;
   border: none;
+  box-shadow: none;
+  color: #fff;
 }
 
 .app-menu .btn-default:hover {
@@ -55,14 +55,14 @@
 }
 
 .navbar .navbar-nav {
-  margin: 0;
   grid-column: 3;
+  margin: 0;
 }
 
 .navbar .navbar-brand {
+  align-items: center;
   display: flex;
   gap: 35px;
-  align-items: center;
   grid-column: 1 / span 1;
   width: 100%;
 }
@@ -91,8 +91,8 @@
   }
 
   .navbar .navbar-brand {
-    grid-column: 1 / span 2;
     gap: 15px;
+    grid-column: 1 / span 2;
     padding: 10px;
   }
 
@@ -112,9 +112,9 @@
 }
 
 .mobile-navbar-container .mobile-header {
+  grid-row: 1;
   height: 100%;
   justify-self: center;
-  grid-row: 1;
 }
 
 .mobile-navbar-container .locale-selector-and-login {
@@ -124,10 +124,10 @@
 }
 
 .mobile-navbar-container .container-fluid {
+  align-items: center;
   display: grid;
   grid-template-columns: 50px auto 70px;
   grid-template-rows: 50px;
-  align-items: center;
   padding: 0;
 }
 
@@ -164,12 +164,12 @@
 }
 
 .app-menu-icon[aria-expanded="true"] .menu-line.top {
-  transform: rotate(45deg);
   top: 7px;
+  transform: rotate(45deg);
 }
 .app-menu-icon[aria-expanded="true"] .menu-line.bottom {
-  transform: rotate(-45deg);
   bottom: 5px;
+  transform: rotate(-45deg);
 }
 .app-menu-icon[aria-expanded="true"] .menu-line.middle {
   display: none;
@@ -180,9 +180,9 @@
 }
 
 .slide-pane_from_left {
-  margin: 52px auto 0 0;
   /* Keep pane from overflowing on smaller screens */
   height: calc(100% - 52px);
+  margin: 52px auto 0 0;
 }
 
 .slide-pane__content {
@@ -200,8 +200,8 @@
 
 .app-menu img,
 .app-menu svg {
-  max-height: 1em;
   margin: 0 2rem;
+  max-height: 1em;
   vertical-align: middle;
   width: 1em;
 }
@@ -257,9 +257,9 @@
 }
 
 .dropdown-header {
+  color: inherit;
   font-size: inherit;
   line-height: normal;
-  color: inherit;
   white-space: nowrap;
 }
 
@@ -285,28 +285,28 @@
 /* PrintLayout styles */
 
 .otp.print-layout {
-  max-width: 640px;
   margin: 30px auto;
+  max-width: 640px;
 }
 
 .otp.print-layout > .header {
-  margin-bottom: 30px;
   border-bottom: 4px solid black;
   font-size: 36px;
   font-weight: 600;
+  margin-bottom: 30px;
 }
 
 .otp.print-layout > .map-container {
   border: 2px solid black;
+  box-sizing: border-box;
   height: 400px;
   margin-bottom: 30px;
-  box-sizing: border-box;
 }
 
 /* View Switcher Styling */
 .view-switcher a {
-  color: rgba(255, 255, 255, 0.85);
   border-radius: 15px;
+  color: rgba(255, 255, 255, 0.85);
   font-size: 14px;
   padding: 6px 12px;
   user-select: none;
@@ -328,8 +328,8 @@
 
 /* Full screen modal styling */
 .fullscreen-modal {
-  width: 75vw;
   height: 60vh;
+  width: 75vw;
 }
 .fullscreen-modal .modal-content {
   height: 90vh;
diff --git a/lib/components/mobile/mobile.css b/lib/components/mobile/mobile.css
index 5e07d9fd7..77a8ef225 100644
--- a/lib/components/mobile/mobile.css
+++ b/lib/components/mobile/mobile.css
@@ -3,18 +3,18 @@
 }
 
 .otp .mobile-bottom-button-container {
-  position: fixed;
   bottom: 0;
-  right: 0;
-  left: 0;
   height: 40px;
+  left: 0;
+  position: fixed;
+  right: 0;
 }
 
 /* Navbar settings */
 
 .otp.mobile .navbar {
-  margin-bottom: 0;
   border: none;
+  margin-bottom: 0;
 }
 
 .otp .navbar .mobile-header {
@@ -55,129 +55,129 @@
 }
 
 .otp .navbar .mobile-close {
-  position: fixed;
-  top: 4px;
-  right: 6px;
   color: white;
   font-size: 18px;
+  position: fixed;
+  right: 6px;
+  top: 4px;
 }
 
 /* Welcome screen */
 
 .otp.mobile .welcome-location {
-  position: fixed;
-  top: 50px;
+  height: 60px;
   left: 0;
+  position: fixed;
   right: 0;
-  height: 60px;
+  top: 50px;
 }
 
 .otp.mobile .welcome-map {
-  position: fixed;
-  top: 110px;
+  bottom: 0;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 0;
+  top: 110px;
 }
 
 /* Location search screen */
 
 .otp.mobile .location-search {
-  position: fixed;
-  top: 50px;
+  bottom: 0;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 0;
+  top: 50px;
 }
 
 /* Main search screen */
 
 .otp.mobile .search-settings {
-  position: fixed;
-  top: 50px;
+  box-shadow: 3px 0px 12px #00000052;
+  height: 250px;
   left: 0;
+  position: fixed;
   right: 0;
-  height: 250px;
-  box-shadow: 3px 0px 12px #00000052;
+  top: 50px;
 }
 
 .otp.mobile .search-map {
-  position: fixed;
-  top: 300px;
+  bottom: 0;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 0;
+  top: 300px;
 }
 
 /* Batch routing search screen */
 
 .otp.mobile .batch-search-map {
-  position: fixed;
-  top: 282px;
+  bottom: 0;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 0;
+  top: 282px;
 }
 
 /* Detailed options screen */
 
 .otp.mobile .options-main-content {
-  position: fixed;
-  top: 50px;
-  left: 0;
-  right: 0;
   bottom: 55px;
-  overflow-y: auto;
+  left: 0;
   overflow-x: hidden;
+  overflow-y: auto;
+  position: fixed;
+  right: 0;
+  top: 50px;
 }
 
 .otp.mobile .options-lower-tray {
-  position: fixed;
+  bottom: 0;
   height: 55px;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 0;
 }
 
 /* Results screen: normal display */
 
 .otp.mobile .mobile-narrative-header {
-  position: fixed;
-  height: 40px;
-  left: 0;
-  right: 0;
   background-color: #444;
   color: #fff;
-  text-align: center;
   font-size: 20px;
   font-weight: 500;
+  height: 40px;
+  left: 0;
+  position: fixed;
+  right: 0;
+  text-align: center;
 }
 
 .otp.mobile .mobile-narrative-container {
-  position: fixed;
   bottom: 20px;
-  right: 0;
   left: 0;
   padding: 8px 12px;
+  position: fixed;
+  right: 0;
 }
 
 .otp.mobile .dots-container {
-  position: fixed;
   bottom: 0;
-  right: 0;
-  left: 0;
   height: 20px;
+  left: 0;
+  position: fixed;
+  right: 0;
   text-align: center;
 }
 
 .otp.mobile .dots-container .dot {
+  background-color: #ddd;
+  border-radius: 4px;
   display: inline-block;
-  width: 8px;
   height: 8px;
-  border-radius: 4px;
-  background-color: #ddd;
   margin: 0px 3px;
   vertical-align: 2px;
+  width: 8px;
 }
 
 .otp.mobile .dots-container .dot.active {
@@ -185,64 +185,64 @@
 }
 
 .otp.mobile .results-map {
-  position: fixed;
-  top: 100px;
+  bottom: 140px;
   left: 0;
+  position: fixed;
   right: 0;
-  bottom: 140px;
+  top: 100px;
 }
 
 /* Results screen: error display */
 
 .otp.mobile .results-error-map {
-  position: fixed;
-  top: 100px;
+  height: 200px;
   left: 0;
+  position: fixed;
   right: 0;
-  height: 200px;
+  top: 100px;
 }
 
 .otp.mobile .results-error-message {
-  position: fixed;
-  left: 0;
-  right: 0;
   bottom: 0;
+  left: 0;
   padding-top: 12px;
+  position: fixed;
+  right: 0;
 }
 
 /* User Settings */
 
 .otp.mobile .user-settings {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   background-color: white;
-  position: fixed;
-  left: 0;
-  right: 0;
+  border-radius: 5px;
   bottom: 0;
-  margin-bottom: 18px;
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   height: 165px;
-  z-index: 999999;
+  left: 0;
+  margin-bottom: 18px;
   overflow-y: scroll;
-  border-radius: 5px;
+  position: fixed;
+  right: 0;
+  z-index: 999999;
 }
 
 /* Stop/Trip/Route Viewer screens */
 
 .otp.mobile .viewer-container {
-  position: fixed;
-  top: 250px;
   bottom: 0;
   left: 0;
-  right: 0;
   overflow-y: auto;
+  position: fixed;
+  right: 0;
+  top: 250px;
 }
 
 .otp.mobile .viewer-map {
-  position: fixed;
-  top: 50px;
+  height: 200px;
   left: 0;
+  position: fixed;
   right: 0;
-  height: 200px;
+  top: 50px;
 }
 
 .otp.mobile .route-viewer-header {
diff --git a/lib/components/user/nav-login-button.css b/lib/components/user/nav-login-button.css
index fcc63d9f0..417c18a36 100644
--- a/lib/components/user/nav-login-button.css
+++ b/lib/components/user/nav-login-button.css
@@ -21,10 +21,10 @@
 }
 
 .navBarItem p {
-  padding: 5px 15px;
-  margin: 0;
-  font-weight: 600;
   font-size: 16px;
+  font-weight: 600;
+  margin: 0;
+  padding: 5px 15px;
 }
 
 .navBarItem ul {
@@ -46,7 +46,7 @@
   #user-selector-label {
     background-color: transparent;
     border: 0;
-    height: 50px;
     color: white;
+    height: 50px;
   }
 }

From ed5ba5f9e8f26caf7b2ac5594b6af8192861fb63 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Thu, 7 Nov 2024 14:43:56 -0600
Subject: [PATCH 6/8] Fix spacing when logged in

---
 lib/components/app/app.css         | 2 +-
 lib/components/app/desktop-nav.tsx | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/lib/components/app/app.css b/lib/components/app/app.css
index 0f1397663..fe1c0a916 100644
--- a/lib/components/app/app.css
+++ b/lib/components/app/app.css
@@ -51,7 +51,7 @@
 
 .navbar .navbar-header {
   display: grid;
-  grid-template-columns: 300px auto 150px;
+  grid-template-columns: 300px auto 170px;
 }
 
 .navbar .navbar-nav {
diff --git a/lib/components/app/desktop-nav.tsx b/lib/components/app/desktop-nav.tsx
index 419ee247b..b2e1ad3c2 100644
--- a/lib/components/app/desktop-nav.tsx
+++ b/lib/components/app/desktop-nav.tsx
@@ -19,6 +19,8 @@ import NavbarItem from './nav-item'
 import ViewSwitcher from './view-switcher'
 
 const StyledNav = styled(Nav)`
+  display: flex;
+  justify-content: end;
   /* Target only the svgs in the Navbar */
   & > li > button > svg,
   & > li > span > button > span > svg {

From f718331eb48f49aa29f9fcad0475f1c1a455a4fe Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Tue, 19 Nov 2024 16:33:06 -0600
Subject: [PATCH 7/8] Fix short stops container in route viewer

---
 lib/components/viewers/styled.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lib/components/viewers/styled.ts b/lib/components/viewers/styled.ts
index 9e0131c07..8a870a84e 100644
--- a/lib/components/viewers/styled.ts
+++ b/lib/components/viewers/styled.ts
@@ -69,10 +69,10 @@ export const StopContainer = styled.ol<RenderProps>`
   color: ${(props) => props?.textColor || DARK_TEXT_GREY};
   background-color: ${(props) => props?.backgroundColor || '#fff'};
   overflow-y: scroll;
-  height: 100%;
-  /* 100px bottom padding is needed to ensure all stops 
-  are shown when browsers don't calculate 100% sensibly */
-  padding: 15px 0 100px;
+  /* Calculate the height of the container a little short to ensure all stops 
+  are shown when browsers don't calculate 100% sensibly. */
+  height: calc(100% - 140px);
+  padding: 15px 0 0px;
 `
 export const StopLink = styled.button<RenderProps>`
   color: ${(props) => props?.textColor + 'da' || DARK_TEXT_GREY};

From 7d811591ea6f721ea092688691192ffe38938cf0 Mon Sep 17 00:00:00 2001
From: amy-corson-ibigroup
 <115499534+amy-corson-ibigroup@users.noreply.github.com>
Date: Wed, 27 Nov 2024 11:59:45 -0600
Subject: [PATCH 8/8] Shorten grid-gap and remove margin on example logo

---
 example.css                | 1 -
 lib/components/app/app.css | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/example.css b/example.css
index afd7900f5..bcef527bc 100644
--- a/example.css
+++ b/example.css
@@ -15,7 +15,6 @@
 .otp .navbar-title {
   color: #fff;
   font-size: 24px;
-  padding-top: 7px;
 }
 
 .otp.mobile .navbar-title {
diff --git a/lib/components/app/app.css b/lib/components/app/app.css
index fe1c0a916..c35529d15 100644
--- a/lib/components/app/app.css
+++ b/lib/components/app/app.css
@@ -62,7 +62,7 @@
 .navbar .navbar-brand {
   align-items: center;
   display: flex;
-  gap: 35px;
+  gap: 25px;
   grid-column: 1 / span 1;
   width: 100%;
 }