From 534674ed6232eada34900694729dfa8c6399374c Mon Sep 17 00:00:00 2001
From: Satya Patel <satyapatel111@gmail.com>
Date: Sun, 26 Apr 2026 14:50:05 -0700
Subject: [PATCH] improve v2 terminal drop hover animation

Drop the dashed border, rounded corners, and inner inset so the
overlay touches the pane edges. Keep the overlay mounted and fade
between opacity-0 and opacity-75 so the hover state actually
animates instead of popping in.
---
 .../components/TerminalPane/TerminalPane.tsx         | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/TerminalPane/TerminalPane.tsx b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/TerminalPane/TerminalPane.tsx
index ab501e4446a..bcbd0c62dcc 100644
--- a/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/TerminalPane/TerminalPane.tsx
+++ b/apps/desktop/src/renderer/routes/_authenticated/_dashboard/v2-workspace/$workspaceId/hooks/usePaneRegistry/components/TerminalPane/TerminalPane.tsx
@@ -1,4 +1,5 @@
 import type { RendererContext } from "@superset/panes";
+import { cn } from "@superset/ui/utils";
 import { workspaceTrpc } from "@superset/workspace-client";
 import "@xterm/xterm/css/xterm.css";
 import {
@@ -377,7 +378,7 @@ export function TerminalPane({
 	return (
 		<div
 			role="application"
-			className="flex h-full w-full flex-col p-2"
+			className="relative flex h-full w-full flex-col p-2"
 			onDragEnter={handleDragEnter}
 			onDragOver={handleDragOver}
 			onDragLeave={handleDragLeave}
@@ -395,10 +396,13 @@ export function TerminalPane({
 					style={{ backgroundColor: appearance.background }}
 				/>
 				<ScrollToBottomButton terminal={terminal} />
-				{isDropActive && (
-					<div className="pointer-events-none absolute inset-0 rounded-sm border-2 border-primary/60 border-dashed bg-primary/10" />
-				)}
 			</div>
+			<div
+				className={cn(
+					"pointer-events-none absolute inset-0 bg-primary/10 transition-opacity duration-100",
+					isDropActive ? "opacity-75" : "opacity-0",
+				)}
+			/>
 			{connectionState === "closed" && (
 				<div className="flex items-center gap-2 border-t border-border px-3 py-1.5 text-xs text-muted-foreground">
 					<span>Disconnected</span>