From 4e6d0b885b2a04ae6019ee70dd827c4a3b1d6598 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Tue, 24 Mar 2026 14:16:07 -0700
Subject: [PATCH] fix(rdesign): chat messages top-to-bottom, input at bottom,
 no page scroll

Move chat input below messages container so conversation flows naturally
top-to-bottom. Add overflow:hidden on html/body to prevent page scrolling.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 modules/rdesign/mod.ts | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/modules/rdesign/mod.ts b/modules/rdesign/mod.ts
index 108355f..d3e21bd 100644
--- a/modules/rdesign/mod.ts
+++ b/modules/rdesign/mod.ts
@@ -72,13 +72,14 @@ routes.get("/", (c) => {
 });
 
 const RDESIGN_CSS = `
-/* Layout */
+/* Layout — prevent page scroll */
+html:has(.rd-app), html:has(.rd-app) body { overflow:hidden; height:100vh; }
 .rd-app { display:flex; flex-direction:column; height:calc(100vh - 56px); overflow:hidden; }
 .rd-toolbar { display:flex; align-items:center; gap:8px; padding:6px 12px; border-bottom:1px solid var(--rs-border); background:var(--rs-bg-surface); flex-shrink:0; }
 .rd-split { display:flex; flex:1; overflow:hidden; }
 .rd-chat { flex:1; display:flex; flex-direction:column; min-width:300px; border-right:1px solid var(--rs-border); background:var(--rs-bg-page); }
 .rd-chat-messages { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:8px; }
-.rd-chat-input { display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--rs-border); background:var(--rs-bg-surface); align-items:flex-end; }
+.rd-chat-input { display:flex; gap:8px; padding:8px 12px; border-top:1px solid var(--rs-border); background:var(--rs-bg-surface); align-items:flex-end; flex-shrink:0; }
 .rd-chat-input textarea { flex:1; padding:8px 12px; border:2px solid var(--rs-border); border-radius:8px; font-size:13px; resize:none; outline:none; font-family:inherit; background:var(--rs-bg-page); color:var(--rs-text-primary); box-sizing:border-box; max-height:120px; }
 .rd-chat-input textarea:focus { border-color:#7c3aed; }
 .rd-chat-input textarea::placeholder { color:var(--rs-text-secondary); }
@@ -480,13 +481,13 @@ function renderDesignApp(space: string, novncUrl: string): string {
 	</div>
 	<div class="rd-split">
 		<div class="rd-chat">
+			<div class="rd-chat-messages" id="rd-messages">
+				<div class="rd-msg-system">Enter a design brief to get started.</div>
+			</div>
 			<div class="rd-chat-input">
 				<textarea id="rd-input" rows="2" placeholder="Describe your design..."></textarea>
 				<button id="rd-send" class="rd-btn rd-btn-primary">Send</button>
 			</div>
-			<div class="rd-chat-messages" id="rd-messages">
-				<div class="rd-msg-system">Enter a design brief to get started.</div>
-			</div>
 		</div>
 		<div class="rd-editor">
 			<div class="rd-canvas" id="rd-canvas">