From 998de41da32a51f1b51e2af85b1a37f9bc085a46 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Wed, 10 Jun 2026 22:56:40 -0700
Subject: [PATCH] [eric] ui: round the app preview into a card (container +
 webview/iframe radius), breathing room around it

---
 frontend/src/app/pages/Views/ViewEditor.tsx  | 4 ++--
 frontend/src/app/pages/Views/ViewPreview.tsx | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/pages/Views/ViewEditor.tsx b/frontend/src/app/pages/Views/ViewEditor.tsx
index 7001fe72..82ba1623 100644
--- a/frontend/src/app/pages/Views/ViewEditor.tsx
+++ b/frontend/src/app/pages/Views/ViewEditor.tsx
@@ -1237,9 +1237,9 @@ const ViewEditor: React.FC<Props> = ({ output }) => {
         </Box>
 
         {/* Tab content */}
-        <Box sx={{ flex: 1, overflow: 'hidden' }}>
+        <Box sx={{ flex: 1, overflow: 'hidden', px: 1, pb: 1 }}>
           {activeTab === TAB_PREVIEW && (
-            <Box sx={{ position: 'relative', width: '100%', height: '100%' }}>
+            <Box sx={{ position: 'relative', width: '100%', height: '100%', borderRadius: '12px', overflow: 'hidden' }}>
               {/* Render iframe under the placeholder so its first paint completes before we fade the placeholder out. */}
               {/* previewSettled gate: a fast-switched-past app unmounts before this flips, so it never mounts a webview renderer. */}
               {previewSettled && (workspaceServeUrl || !showInstallPlaceholder) && (
diff --git a/frontend/src/app/pages/Views/ViewPreview.tsx b/frontend/src/app/pages/Views/ViewPreview.tsx
index ce39a5a1..59e31b6b 100644
--- a/frontend/src/app/pages/Views/ViewPreview.tsx
+++ b/frontend/src/app/pages/Views/ViewPreview.tsx
@@ -340,6 +340,10 @@ const ViewPreview = forwardRef<ViewPreviewHandle, Props>(({
             width: '100%',
             height: '100%',
             border: 'none',
+            // Best-effort: newer Chromium clips a <webview>'s own radius even though
+            // it ignores a parent's. Square in older builds, harmless either way.
+            borderRadius: '12px',
+            overflow: 'hidden',
             background: _hostBg,
             ...style,
           }}
@@ -356,6 +360,7 @@ const ViewPreview = forwardRef<ViewPreviewHandle, Props>(({
             width: '100%',
             height: '100%',
             border: 'none',
+            borderRadius: '12px',
             background: _hostBg,
             ...style,
           }}