From 8205af92cab25704097775c20aa8760ca903fda7 Mon Sep 17 00:00:00 2001
From: chip-peanut-bot <chip-peanut-bot@users.noreply.github.com>
Date: Wed, 30 Sep 2026 15:02:02 +0200
Subject: [PATCH] New split page: close the desktop frame at the top and bottom

On desktop the /new column ran flush to the viewport's top and bottom edges,
so the outline vanished there and the 8px offset shadow started 8px down,
leaving a notch at the top-right. The create form has no fixed controls, so
it can sit as a card with a 2rem gap above and below; the frame and its form
shrink by the same amount so a tall viewport still does not scroll.

Opt-in via data-frame="card" so the room screen, whose fixed bottom bar is
aligned to the viewport, keeps its full-height column. Mobile is untouched
(the rule lives inside the existing min-width: 768px block).

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbTFsJ6NvdFt4NG4UJG57m
---
 apps/web/src/app/(product-shell)/new/page.tsx |  2 +-
 apps/web/src/styles/desktop-frame.css         | 12 ++++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

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);