From 085352a6f078d1dd241081ee1fb1898cf02a2d27 Mon Sep 17 00:00:00 2001
From: Nikhil <nikhilsv92@gmail.com>
Date: Thu, 26 Mar 2026 12:54:00 -0700
Subject: [PATCH] fix(ui): resolve MCP promo banner dismiss button overlapping
 with text (#581)

Move dismiss button from absolute positioning to inline flex child,
preventing it from overlapping with the "Set up" button.
---
 .../apps/agent/entrypoints/app/ai-settings/McpPromoBanner.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/browseros-agent/apps/agent/entrypoints/app/ai-settings/McpPromoBanner.tsx b/packages/browseros-agent/apps/agent/entrypoints/app/ai-settings/McpPromoBanner.tsx
index 2db744ba6..7b1a845e8 100644
--- a/packages/browseros-agent/apps/agent/entrypoints/app/ai-settings/McpPromoBanner.tsx
+++ b/packages/browseros-agent/apps/agent/entrypoints/app/ai-settings/McpPromoBanner.tsx
@@ -17,7 +17,7 @@ export const McpPromoBanner: FC = () => {
   }
 
   return (
-    <div className="relative flex items-center gap-4 rounded-xl border border-border bg-card p-4 shadow-sm transition-all hover:shadow-md">
+    <div className="flex items-center gap-4 rounded-xl border border-border bg-card p-4 shadow-sm transition-all hover:shadow-md">
       <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-orange)]/10">
         <Server className="h-5 w-5 text-[var(--accent-orange)]" />
       </div>
@@ -48,7 +48,7 @@ export const McpPromoBanner: FC = () => {
       <button
         type="button"
         onClick={() => setDismissed(true)}
-        className="absolute top-2 right-2 rounded-sm p-1 text-muted-foreground opacity-50 transition-opacity hover:opacity-100"
+        className="shrink-0 rounded-sm p-1 text-muted-foreground opacity-50 transition-opacity hover:opacity-100"
       >
         <X className="h-3.5 w-3.5" />
       </button>