From ccb340dc6c4f41d562144cb670f2ad5d3b91202d Mon Sep 17 00:00:00 2001
From: 137 <113233555+caezium@users.noreply.github.com>
Date: Wed, 9 Sep 2026 17:39:23 +0800
Subject: [PATCH 1/2] fix(web): align floating browser preview corners

---
 .../preview/ThreadPreviewMiniPlayer.tsx        | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
index 9e59e56a24f0..cf6b05ffa475 100644
--- a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
+++ b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
@@ -44,6 +44,8 @@ interface Props {
   readonly bottomInset: number;
 }
 
+const PREVIEW_MINI_PLAYER_CORNER_RADIUS = 12;
+
 // Invisible grab zones straddling each edge; the cursor is the only affordance.
 const RESIZE_HANDLES: ReadonlyArray<{
   readonly direction: BrowserViewportResizeDirection;
@@ -193,7 +195,13 @@ export function ThreadPreviewMiniPlayer({ threadRef, tabId, bottomInset }: Props
           aria-label="Floating browser preview"
           data-preview-mini-player={tabId}
           className="pointer-events-none absolute select-none"
-          style={{ left: frame.x, top: frame.y, width: frame.width, height: frame.height }}
+          style={{
+            left: frame.x,
+            top: frame.y,
+            width: frame.width,
+            height: frame.height,
+            borderRadius: PREVIEW_MINI_PLAYER_CORNER_RADIUS,
+          }}
         >
           <div className="group pointer-events-auto absolute right-2 top-2 z-[49] size-3">
             <div
@@ -267,19 +275,19 @@ export function ThreadPreviewMiniPlayer({ threadRef, tabId, bottomInset }: Props
             </div>
           </div>
 
-          <div className="absolute inset-0 z-[47] rounded-xl bg-muted shadow-2xl/35" />
+          <div className="absolute inset-0 z-[47] rounded-[inherit] bg-muted shadow-2xl/35" />
           <BrowserSurfaceSlot
             tabId={runtimeTabId}
             visible={Boolean(desktopOverlay?.hasWebContents)}
-            cornerRadius={12}
+            cornerRadius={PREVIEW_MINI_PLAYER_CORNER_RADIUS}
             zIndex={PREVIEW_MINI_PLAYER_WEBVIEW_Z_INDEX}
             fitSourceContent
             layoutVersion={`${frame.x}:${frame.y}`}
             className="absolute inset-0"
           />
-          <div className="pointer-events-none absolute inset-0 z-[49] rounded-xl ring-1 ring-inset ring-border/80" />
+          <div className="pointer-events-none absolute inset-0 z-[49] rounded-[inherit] ring-1 ring-inset ring-border/80" />
           {!desktopOverlay?.hasWebContents ? (
-            <div className="pointer-events-none absolute inset-0 z-[49] flex items-center justify-center rounded-xl bg-muted text-xs text-muted-foreground">
+            <div className="pointer-events-none absolute inset-0 z-[49] flex items-center justify-center rounded-[inherit] bg-muted text-xs text-muted-foreground">
               Reconnecting preview…
             </div>
           ) : null}

From 82866d9a1fdd22b25c4503e27d8dd203fdff97c9 Mon Sep 17 00:00:00 2001
From: 137 <113233555+caezium@users.noreply.github.com>
Date: Wed, 9 Sep 2026 17:47:57 +0800
Subject: [PATCH 2/2] docs(web): explain floating preview radius alignment

---
 apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
index cf6b05ffa475..4384019abbad 100644
--- a/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
+++ b/apps/web/src/components/preview/ThreadPreviewMiniPlayer.tsx
@@ -61,6 +61,10 @@ const RESIZE_HANDLES: ReadonlyArray<{
   { direction: "southeast", className: "-bottom-2 -right-2 size-4 cursor-nwse-resize" },
 ];
 
+/**
+ * Floats the thread's browser surface over chat. Native clipping and the DOM
+ * frame use the same radius so their separately composited edges stay aligned.
+ */
 export function ThreadPreviewMiniPlayer({ threadRef, tabId, bottomInset }: Props) {
   const containerRef = useRef<HTMLDivElement | null>(null);
   const gestureRef = useRef<PointerGesture | null>(null);