From f97d3f5af91b2fc76144bd779291b4d1631e7f6e Mon Sep 17 00:00:00 2001
From: Armaan Jain <84474476+Developing-Gamer@users.noreply.github.com>
Date: Mon, 15 Jun 2026 18:35:56 -0700
Subject: [PATCH] Devtool tab transition fix (#1600)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/hexclave/hexclave/blob/dev/CONTRIBUTING.md

-->


<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Fixes devtool tab switching so hidden panes don’t intercept clicks and
active panes render without flicker.

- **Bug Fixes**
- Replace visibility/animation with display: none/block, plus opacity
and z-index, so only the active pane is interactive.
- Add pane background and remove fade-in animation to prevent overlap
and iframe flicker.

<sup>Written for commit ec80835045b00738dc07cb12081386f6ac53b982.
Summary will update on new commits.</sup>

<a
href="https://cubic.dev/pr/hexclave/hexclave/pull/1600?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>

<!-- End of auto-generated description by cubic. -->



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Refined dev tool tab pane display behavior for improved visual
rendering and interaction handling.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../template/src/dev-tool/dev-tool-styles.ts  | 21 +++++++------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/template/src/dev-tool/dev-tool-styles.ts b/packages/template/src/dev-tool/dev-tool-styles.ts
index b96f32503..69bf23a89 100644
--- a/packages/template/src/dev-tool/dev-tool-styles.ts
+++ b/packages/template/src/dev-tool/dev-tool-styles.ts
@@ -302,11 +302,14 @@ export const devToolCSS = getInPageUiBaseCSS('.hexclave-devtool') + `
   .hexclave-devtool .sdt-tab-pane {
     position: absolute;
     inset: 0;
+    display: none;
     overflow-y: auto;
     overflow-x: hidden;
     padding: 16px;
-    visibility: hidden;
+    background: var(--sdt-bg);
+    opacity: 0;
     pointer-events: none;
+    z-index: 0;
   }
 
   .hexclave-devtool .sdt-tab-pane-iframe {
@@ -315,20 +318,10 @@ export const devToolCSS = getInPageUiBaseCSS('.hexclave-devtool') + `
   }
 
   .hexclave-devtool .sdt-tab-pane-active {
-    visibility: visible;
+    display: block;
+    opacity: 1;
     pointer-events: auto;
-    animation: sdt-tab-fade-in 0.15s ease-out;
-  }
-
-  @keyframes sdt-tab-fade-in {
-    from {
-      opacity: 0;
-      transform: translateY(6px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
+    z-index: 1;
   }
 
   /* ===== Overview tab — single column ===== */