From 22e5e0e5dae64223150bf40b41ebe2a8c02a5789 Mon Sep 17 00:00:00 2001
From: Jennifer Shehane <jennifer@cypress.io>
Date: Mon, 10 Mar 2025 10:16:36 -0400
Subject: [PATCH] revert the resizable panel changes - make zindex of input
 dynamic!

---
 packages/app/src/runner/ResizablePanels.vue          | 8 ++++----
 packages/app/src/runner/SpecRunnerHeaderOpenMode.vue | 8 +++++++-
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/app/src/runner/ResizablePanels.vue b/packages/app/src/runner/ResizablePanels.vue
index 5df0179280aa..fbdd2db6094f 100644
--- a/packages/app/src/runner/ResizablePanels.vue
+++ b/packages/app/src/runner/ResizablePanels.vue
@@ -13,7 +13,7 @@
     <div
       v-show="showPanel1"
       data-cy="specs-list-panel"
-      class="h-full shrink-0 z-60 relative"
+      class="h-full shrink-0 z-20 relative"
       :style="{width: `${panel1Width}px`}"
     >
       <slot
@@ -23,7 +23,7 @@
 
       <div
         data-cy="panel1ResizeHandle"
-        class="cursor-ew-resize h-full top-0 right-[-6px] w-[10px] z-70 absolute"
+        class="cursor-ew-resize h-full top-0 right-[-6px] w-[10px] z-30 absolute"
         @mousedown="handleMousedown('panel1', $event)"
       />
     </div>
@@ -31,14 +31,14 @@
     <div
       v-show="showPanel2"
       data-cy="reporter-panel"
-      class="h-full shrink-0 z-60 relative"
+      class="h-full shrink-0 z-10 relative"
       :style="{width: `${panel2Width}px`}"
     >
       <slot name="panel2" />
 
       <div
         data-cy="panel2ResizeHandle"
-        class="cursor-ew-resize h-full top-0 right-[-6px] w-[10px] z-70 absolute"
+        class="cursor-ew-resize h-full top-0 right-[-6px] w-[10px] z-30 absolute"
         @mousedown="handleMousedown('panel2', $event)"
       />
     </div>
diff --git a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
index bb4aa6999bf2..da57f50a94c4 100644
--- a/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
+++ b/packages/app/src/runner/SpecRunnerHeaderOpenMode.vue
@@ -53,7 +53,7 @@
           :placeholder="inputPlaceholder"
           aria-label="url of the application under test"
           class="aut-url-input flex grow mr-[12px] leading-normal max-w-full text-indigo-500 self-center hocus-link-default truncate"
-          :style="{ zIndex: 51 }"
+          :style="{ zIndex: inputZIndex }"
           @input="setStudioUrl"
           @click="openExternally"
           @keyup.enter="visitUrl"
@@ -182,6 +182,12 @@ watchEffect(() => {
 
 const autIframe = props.getAutIframe()
 
+const inputZIndex = computed(() => {
+  // input needs to be above the Studio prompt overlay
+  // but other times it needs to be below other resizable panels
+  return studioStore.needsUrl ? 51 : 5
+})
+
 const displayScale = computed(() => {
   return autStore.scale < 1 ? `${Math.round(autStore.scale * 100) }%` : 0
 })