jeffemmett
/
rspace-online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Jeff Emmett 2026-03-24 14:16:07 -07:00
parent bf0661fab2
commit 4e6d0b885b
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
modules/rdesign/mod.ts
View File

@ -72,13 +72,14 @@ routes.get("/", (c) => {
}); });
const RDESIGN_CSS = ` 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-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-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-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 { 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-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 { 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:focus { border-color:#7c3aed; }
.rd-chat-input textarea::placeholder { color:var(--rs-text-secondary); } .rd-chat-input textarea::placeholder { color:var(--rs-text-secondary); }
@ -480,13 +481,13 @@ function renderDesignApp(space: string, novncUrl: string): string {
</div> </div>
<div class="rd-split"> <div class="rd-split">
<div class="rd-chat"> <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"> <div class="rd-chat-input">
<textarea id="rd-input" rows="2" placeholder="Describe your design..."></textarea> <textarea id="rd-input" rows="2" placeholder="Describe your design..."></textarea>
<button id="rd-send" class="rd-btn rd-btn-primary">Send</button> <button id="rd-send" class="rd-btn rd-btn-primary">Send</button>
</div> </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>
<div class="rd-editor"> <div class="rd-editor">
<div class="rd-canvas" id="rd-canvas"> <div class="rd-canvas" id="rd-canvas">