From b146aaf63613569c72b7f3d0e451d72034c4e0ce Mon Sep 17 00:00:00 2001
From: Andrew Khadder <54488379+khandrew1@users.noreply.github.com>
Date: Mon, 29 Dec 2025 10:01:31 -0800
Subject: [PATCH 1/2] chore: consistent styling for ChatGPT and MCP apps

---
 .../chat-v2/thread/mcp-apps-renderer.tsx      | 85 +++++++++++++++----
 1 file changed, 70 insertions(+), 15 deletions(-)

diff --git a/client/src/components/chat-v2/thread/mcp-apps-renderer.tsx b/client/src/components/chat-v2/thread/mcp-apps-renderer.tsx
index 1c3ee93bb..b7387562f 100644
--- a/client/src/components/chat-v2/thread/mcp-apps-renderer.tsx
+++ b/client/src/components/chat-v2/thread/mcp-apps-renderer.tsx
@@ -887,22 +887,39 @@ export function MCPAppsRenderer({
 
   const isPip = effectiveDisplayMode === "pip";
   const isFullscreen = effectiveDisplayMode === "fullscreen";
+  const isMobilePlaygroundMode =
+    isPlaygroundActive && playgroundDeviceType === "mobile";
+  const isContainedFullscreenMode =
+    isPlaygroundActive &&
+    (playgroundDeviceType === "mobile" ||
+      playgroundDeviceType === "tablet");
+
+  const containerClassName = (() => {
+    if (isFullscreen) {
+      if (isContainedFullscreenMode) {
+        return "absolute inset-0 z-10 w-full h-full bg-background flex flex-col";
+      }
+      return "fixed inset-0 z-40 w-full h-full bg-background flex flex-col";
+    }
 
-  let containerClassName = "mt-3 space-y-2 relative group";
-  if (isFullscreen) {
-    containerClassName =
-      "fixed inset-0 z-50 w-full h-full bg-background flex flex-col";
-  } else if (isPip) {
-    containerClassName = [
-      "fixed top-4 inset-x-0 z-40 w-full max-w-4xl mx-auto space-y-2",
-      "bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80",
-      "shadow-xl border border-border/60 rounded-xl p-3",
-    ].join(" ");
-  }
+    if (isPip) {
+      if (isMobilePlaygroundMode) {
+        return "absolute inset-0 z-10 w-full h-full bg-background flex flex-col";
+      }
+      return [
+        "fixed top-4 inset-x-0 z-40 w-full max-w-4xl mx-auto space-y-2",
+        "bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/80",
+        "shadow-xl border border-border/60 rounded-xl p-3",
+      ].join(" ");
+    }
+
+    return "mt-3 space-y-2 relative group";
+  })();
 
   return (
     <div className={containerClassName}>
-      {(isPip || isFullscreen) && (
+      {((isFullscreen && isContainedFullscreenMode) ||
+        (isPip && isMobilePlaygroundMode)) && (
         <button
           onClick={() => {
             setDisplayMode("inline");
@@ -911,13 +928,47 @@ export function MCPAppsRenderer({
             }
             // onExitFullscreen is called within setDisplayMode when leaving fullscreen
           }}
-          className="absolute left-2 top-2 z-10 flex h-6 w-6 items-center justify-center rounded-md bg-background/80 hover:bg-background border border-border/50 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+          className="absolute left-3 top-3 z-20 flex h-8 w-8 items-center justify-center rounded-full bg-black/20 hover:bg-black/40 text-white transition-colors cursor-pointer"
           aria-label="Close"
         >
-          <X className="w-4 h-4" />
+          <X className="w-5 h-5" />
         </button>
       )}
 
+      {isFullscreen && !isContainedFullscreenMode && (
+        <div className="flex items-center justify-between px-4 h-14 border-b border-border/40 bg-background/95 backdrop-blur z-40 shrink-0">
+          <div />
+          <div className="font-medium text-sm text-muted-foreground">
+            {toolName}
+          </div>
+          <button
+            onClick={() => {
+              setDisplayMode("inline");
+              if (pipWidgetId === toolCallId) {
+                onExitPip?.(toolCallId);
+              }
+            }}
+            className="p-2 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+            aria-label="Exit fullscreen"
+          >
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+      )}
+
+      {isPip && !isMobilePlaygroundMode && (
+        <button
+          onClick={() => {
+            setDisplayMode("inline");
+            onExitPip?.(toolCallId);
+          }}
+          className="absolute left-2 top-2 z-10 flex h-6 w-6 items-center justify-center rounded-md bg-background/80 hover:bg-background border border-border/50 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+          aria-label="Close PiP mode"
+          title="Close PiP mode"
+        >
+          <X className="w-4 h-4" />
+        </button>
+      )}
       {/* Uses SandboxedIframe for DRY double-iframe architecture */}
       <SandboxedIframe
         ref={sandboxRef}
@@ -927,7 +978,11 @@ export function MCPAppsRenderer({
         permissive={widgetPermissive}
         onMessage={handleMessage}
         title={`MCP App: ${toolName}`}
-        className="w-full border border-border/40 rounded-md bg-background"
+        className={`w-full bg-background overflow-hidden ${
+          isFullscreen
+            ? "flex-1 border-0 rounded-none"
+            : "border border-border/40 rounded-md"
+        }`}
         style={{
           height: isFullscreen ? "100%" : "400px",
         }}

From 5e0bd038e93d8caa6fac665863b024fe999c2f64 Mon Sep 17 00:00:00 2001
From: Andrew Khadder <54488379+khandrew1@users.noreply.github.com>
Date: Mon, 29 Dec 2025 10:05:05 -0800
Subject: [PATCH 2/2] chore: formatting

---
 client/src/components/chat-v2/thread/mcp-apps-renderer.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/src/components/chat-v2/thread/mcp-apps-renderer.tsx b/client/src/components/chat-v2/thread/mcp-apps-renderer.tsx
index b7387562f..3ee0011a6 100644
--- a/client/src/components/chat-v2/thread/mcp-apps-renderer.tsx
+++ b/client/src/components/chat-v2/thread/mcp-apps-renderer.tsx
@@ -891,8 +891,7 @@ export function MCPAppsRenderer({
     isPlaygroundActive && playgroundDeviceType === "mobile";
   const isContainedFullscreenMode =
     isPlaygroundActive &&
-    (playgroundDeviceType === "mobile" ||
-      playgroundDeviceType === "tablet");
+    (playgroundDeviceType === "mobile" || playgroundDeviceType === "tablet");
 
   const containerClassName = (() => {
     if (isFullscreen) {