revert the resizable panel changes - make zindex of input dynamic!

cypress-io · Mar 10, 2025 · 22e5e0e · 22e5e0e
1 parent 057fcaf
commit 22e5e0e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git 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,22 +23,22 @@
 
       <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>
     <!-- using v-show to preserve state since panel2 is collapsible/expandable during screenshots -->
     <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
@@ -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
 })