wallco.ai: side-by-side modals on /design/:id — when both chat+pair open, chat shifts left by 480px via CSS :has() · 220ms transition on right · mobile stacks

caf6496b008535bc1cbe7c6592424a8c17306143 · 2026-05-11 21:34:00 -0700 · Steve

Files touched

M server.js

Diff

commit caf6496b008535bc1cbe7c6592424a8c17306143
Author: Steve <steve@designerwallcoverings.com>
Date:   Mon May 11 21:34:00 2026 -0700

    wallco.ai: side-by-side modals on /design/:id — when both chat+pair open, chat shifts left by 480px via CSS :has() · 220ms transition on right · mobile stacks
---
 server.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/server.js b/server.js
index f5e0a13..de5957e 100644
--- a/server.js
+++ b/server.js
@@ -918,8 +918,15 @@ ${isAdmin ? `
   .decision .btn-pair { background:#16140f; color:#d2b15c; border-color:#3a3631; }
   .decision .btn-pair:hover { background:#d2b15c; color:#0f0e0c; border-color:#d2b15c; }
   /* Pair modal */
-  #pair-modal { position:fixed; top:0; right:0; bottom:0; width:480px; background:#16140f; border-left:1px solid #2a2825; display:none; flex-direction:column; z-index:1001; box-shadow:-8px 0 20px rgba(0,0,0,.4); color:#e8e2d6; font:13px/1.4 -apple-system, system-ui, sans-serif; }
+  #pair-modal { position:fixed; top:0; right:0; bottom:0; width:480px; background:#16140f; border-left:1px solid #2a2825; display:none; flex-direction:column; z-index:1001; box-shadow:-8px 0 20px rgba(0,0,0,.4); color:#e8e2d6; font:13px/1.4 -apple-system, system-ui, sans-serif; transition: right .22s ease; }
   #pair-modal.open { display:flex; }
+  /* Side-by-side when both right-pinned modals are open — pair stays at right edge, chat shifts left by pair's width */
+  body:has(#pair-modal.open):has(#chat-modal.open) #chat-modal { right: 480px; }
+  body:has(#chat-modal.open):has(#pair-modal.open) #pair-modal { box-shadow: -8px 0 20px rgba(0,0,0,.4), -1px 0 0 #2a2825; }
+  @media (max-width: 900px) {
+    body:has(#pair-modal.open):has(#chat-modal.open) #chat-modal { right: 0; opacity: 0; pointer-events: none; }
+    #pair-modal, #chat-modal { width: 100vw; max-width: 480px; }
+  }
   #pair-modal header { padding:14px 18px; border-bottom:1px solid #2a2825; display:flex; gap:10px; align-items:center; }
   #pair-modal header .ctx-main { flex:1; font-size:12px; color:#d2b15c; }
   #pair-modal header .ctx-sub  { font-size:10px; color:#888; margin-top:2px; }
@@ -954,7 +961,7 @@ ${isAdmin ? `
   .chip:hover { background:#4a443d; color:#fff; }
   .chip.has-chat { border-color: var(--chip-hot); color: var(--chip-hot); }
   /* chat side panel */
-  #chat-modal { position:fixed; top:0; right:0; bottom:0; width:420px; background:#16140f; border-left:1px solid #2a2825; display:none; flex-direction:column; z-index:1000; box-shadow:-8px 0 20px rgba(0,0,0,.4); color:#e8e2d6; font:13px/1.4 -apple-system, system-ui, sans-serif; }
+  #chat-modal { position:fixed; top:0; right:0; bottom:0; width:420px; background:#16140f; border-left:1px solid #2a2825; display:none; flex-direction:column; z-index:1000; box-shadow:-8px 0 20px rgba(0,0,0,.4); color:#e8e2d6; font:13px/1.4 -apple-system, system-ui, sans-serif; transition: right .22s ease; }
   #chat-modal.open { display:flex; }
   #chat-modal header { padding:14px 18px; border-bottom:1px solid #2a2825; display:flex; gap:10px; align-items:center; }
   #chat-modal header .ctx-main { flex:1; font-size:12px; color:#d2b15c; }

← 59a32e8 wallco.ai: side-by-side modal layout on /design/:id — when B · back to Wallco Ai · redesign(wallco-ai): luxury 404 page for /design/:id 229a8e0 →