From d6c4ec01b50cd3ab0d62d14e0cd86329f4a2693a Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Thu, 8 Oct 2026 00:51:45 -0500
Subject: [PATCH] fix: lighter confirm prompt overlay to stop lag when it opens

---
 src/ui/components/surface/surface-scope.tsx |  8 +++-----
 src/ui/index.css                            | 12 ++++++++++++
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/ui/components/surface/surface-scope.tsx b/src/ui/components/surface/surface-scope.tsx
index 48f14ec01..8aced0893 100644
--- a/src/ui/components/surface/surface-scope.tsx
+++ b/src/ui/components/surface/surface-scope.tsx
@@ -321,10 +321,8 @@ export function PanePrompt({
   return (
     <div
       className={cn(
-        "motion-context-enter absolute inset-0 flex items-center justify-center overflow-y-auto p-4",
-        layer === "connection"
-          ? "z-500 bg-canvas"
-          : "z-50 bg-background/80 backdrop-blur-sm",
+        "motion-fade-enter absolute inset-0 flex items-center justify-center overflow-y-auto p-4",
+        layer === "connection" ? "z-500 bg-canvas" : "z-50 bg-background/85",
       )}
       style={
         layer === "connection" && backgroundColor
@@ -340,7 +338,7 @@ export function PanePrompt({
         aria-modal="true"
         aria-labelledby={labelledBy ?? headingId}
         className={cn(
-          "my-auto flex w-full max-w-sm flex-col border bg-popover shadow-xl",
+          "motion-context-enter my-auto flex w-full max-w-sm flex-col border bg-popover shadow-xl",
           tone === "destructive" ? "border-destructive/40" : "border-border",
           className,
         )}
diff --git a/src/ui/index.css b/src/ui/index.css
index 23690fd8f..cf65a150d 100644
--- a/src/ui/index.css
+++ b/src/ui/index.css
@@ -636,6 +636,11 @@ html.fs-xl {
     var(--motion-ease-enter) both;
 }
 
+.motion-fade-enter {
+  animation: motion-fade-enter var(--motion-duration-context)
+    var(--motion-ease-enter) both;
+}
+
 .motion-workspace-enter {
   animation: motion-workspace-enter var(--motion-duration-panel)
     var(--motion-ease-enter) both;
@@ -723,6 +728,12 @@ html.fs-xl {
   }
 }
 
+@keyframes motion-fade-enter {
+  from {
+    opacity: 0;
+  }
+}
+
 @keyframes motion-workspace-enter {
   from {
     opacity: 0;
@@ -783,6 +794,7 @@ html.fs-xl {
 
   .motion-panel-enter,
   .motion-context-enter,
+  .motion-fade-enter,
   .motion-workspace-enter,
   .motion-workspace-layout,
   .motion-transfer-phase,