diff --git a/apps/web/src/app/(product-shell)/new/page.tsx b/apps/web/src/app/(product-shell)/new/page.tsx
index e152f755..67890b1c 100644
--- a/apps/web/src/app/(product-shell)/new/page.tsx
+++ b/apps/web/src/app/(product-shell)/new/page.tsx
@@ -23,7 +23,7 @@ export const metadata: Metadata = {
 export default async function NewRoomPage({ searchParams }: { searchParams: Promise<Query> }) {
     return (
         <>
-            <main className="split-app-frame mx-auto min-h-dvh w-full max-w-xl bg-background">
+            <main data-frame="card" className="split-app-frame mx-auto min-h-dvh w-full max-w-xl bg-background">
                 <CreateRoomForm prefill={readPrefill(await searchParams)} />
             </main>
             {/* The other page a room is created from. It is noindex and no ad points at it, but
diff --git a/apps/web/src/styles/desktop-frame.css b/apps/web/src/styles/desktop-frame.css
index ea6e2aef..0d05311f 100644
--- a/apps/web/src/styles/desktop-frame.css
+++ b/apps/web/src/styles/desktop-frame.css
@@ -12,6 +12,18 @@
         box-shadow: 8px 8px 0 var(--split-ink);
     }
 
+    /* A self-contained screen with no fixed controls reads as a card resting on the canvas:
+       a gap above and below so the outline and offset shadow close on all four sides instead
+       of running off the viewport. Screens with fixed bars keep the full-height column. */
+    .split-app-frame[data-frame='card'] {
+        margin-block: 2rem;
+        min-height: calc(100dvh - 4rem);
+    }
+
+    .split-app-frame[data-frame='card'] > form {
+        min-height: calc(100dvh - 4rem);
+    }
+
     body:has(.split-app-frame) [data-vaul-drawer] {
         /* Include both existing 1.5px borders without narrowing the 36rem content. */
         width: calc(36rem + 3px);