From c4c087f902fbf7ac9d7cc263b62e026cd3362b80 Mon Sep 17 00:00:00 2001
From: Lisa Kim <lisa@goteleport.com>
Date: Fri, 20 Jun 2025 17:04:59 -0700
Subject: [PATCH] Web: fix topbar nav covering resource lock checkout panel

---
 .../src/LocksV2/NewLock/LockCheckout/LockCheckout.tsx        | 2 ++
 web/packages/teleport/src/Navigation/zIndexMap.ts            | 5 +++++
 2 files changed, 7 insertions(+)

diff --git a/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/LockCheckout.tsx b/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/LockCheckout.tsx
index a9e23d51fe86a..709e6c91ff337 100644
--- a/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/LockCheckout.tsx
+++ b/web/packages/teleport/src/LocksV2/NewLock/LockCheckout/LockCheckout.tsx
@@ -42,6 +42,7 @@ import { pluralize } from 'shared/utils/text';
 import shieldCheck from 'teleport/assets/shield-check.png';
 import cfg from 'teleport/config';
 import { TrashButton } from 'teleport/LocksV2/common';
+import { zIndexMap } from 'teleport/Navigation/zIndexMap';
 import { lockService } from 'teleport/services/locks';
 
 import {
@@ -200,6 +201,7 @@ export const LockCheckout = forwardRef<HTMLDivElement, Props>(
           top: 0;
           left: 0;
           overflow: hidden;
+          z-index: ${zIndexMap.checkoutSidePanel};
         `}
       >
         <Dimmer className={transitionState} />
diff --git a/web/packages/teleport/src/Navigation/zIndexMap.ts b/web/packages/teleport/src/Navigation/zIndexMap.ts
index aa682cc2133bc..f163c738e21ec 100644
--- a/web/packages/teleport/src/Navigation/zIndexMap.ts
+++ b/web/packages/teleport/src/Navigation/zIndexMap.ts
@@ -17,6 +17,11 @@
  */
 
 export const zIndexMap = {
+  // "checkoutSidePanel" z-index must be a higher value than "topBar" z-index.
+  // checkoutSidePanel encompasses entire height of the browser and
+  // the high z-index prevents navigational bits from rendering over
+  // the panel.
+  checkoutSidePanel: 100,
   topBar: 19,
   sideNavButtons: 18,
   sideNavContainer: 17,