fix: Right panel shouldn't cover top nav bar

Author: KaylaBrady

assets/css/_notification_drawer.scss

@@ -8,7 +8,6 @@
   right: 0;
   top: 0;
   width: 23.5rem;
-  z-index: $right-panel-z-index;
 
   @media screen and (max-width: $mobile-max-width) {
     width: 100%;

assets/css/_properties_panel.scss

@@ -9,7 +9,7 @@
   right: 0;
   top: 0;
   width: 23.5rem;
-  z-index: $right-panel-z-index;
+  z-index: $vpp-z-index;
 
   @media screen and (max-width: $mobile-max-width) {
     width: 100vw;
@@ -38,5 +38,5 @@
 
 .m-properties-panel__modal-overlay {
   @include modal-overlay;
-  z-index: 1000;
+  z-index: $modal-overlay-z-index;
 }

assets/css/_swings_view.scss

@@ -8,7 +8,6 @@
   position: absolute;
   right: 0;
   top: 0;
-  z-index: $right-panel-z-index;
 
   .m-old-close-button {
     padding: 1.5rem;

assets/css/app.scss

@@ -9,7 +9,9 @@ $shuttle-picker-width: 12.6rem;
 $view-header-height: 2.5rem;
 $vpp-location-padding: 1rem;
 $navbar-z-index: 1100;
-$right-panel-z-index: $navbar-z-index + 100;
+$modal-overlay-z-index: $navbar-z-index - 100;
+$vpp-z-index: $modal-overlay-z-index + 50;
+
 @import "base";
 @import "inter";
 @import "ui_kit";

assets/src/components/app.tsx

@@ -62,10 +62,9 @@ const AppRoutes = () => {
               <BrowserRoute path="/search" element={<SearchPage />} />
             </Routes>
             {openView === OpenView.Late ? <LateView /> : null}
+            <RightPanel selectedVehicleOrGhost={selectedVehicleOrGhost} />
           </Nav>
           <Modal />
-
-          <RightPanel selectedVehicleOrGhost={selectedVehicleOrGhost} />
         </div>
       </VehiclesByRouteIdProvider>
     </div>