ui(build): persistent 3-column Room Builder — left words, right products column, middle images/room-settings centered (desktop); products no longer hidden under hamburger; hint text updated

439a773f4afe655088dce2139a9a8a0dd588b60f · 2026-08-01 23:04:29 -0700 · Steve Abrams

Files touched

M public/css/site.css
M public/js/build.js
M server.js

Diff

commit 439a773f4afe655088dce2139a9a8a0dd588b60f
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Sat Aug 1 23:04:29 2026 -0700

    ui(build): persistent 3-column Room Builder — left words, right products column, middle images/room-settings centered (desktop); products no longer hidden under hamburger; hint text updated
---
 public/css/site.css | 19 +++++++++++++++++++
 public/js/build.js  |  2 +-
 server.js           |  4 ++--
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/public/css/site.css b/public/css/site.css
index 1400d4b..00e29fd 100644
--- a/public/css/site.css
+++ b/public/css/site.css
@@ -1507,6 +1507,25 @@ body:has(.rb-right:not(.collapsed)) .rb-ham { opacity: 0; pointer-events: none;
    RESPONSIVE
    ========================================================= */
 
+/* Desktop: persistent 3-column Room Builder —
+   LEFT = select words (filters) · MIDDLE = images & room settings (centered) · RIGHT = select products */
+@media (min-width: 981px) {
+  .rb-body { grid-template-columns: 210px minmax(0, 1fr) 300px; }
+  /* products become a real in-grid column instead of an off-canvas drawer */
+  .rb-right {
+    position: sticky; top: 96px; height: auto; max-height: calc(100vh - 116px);
+    width: auto; z-index: 1; box-shadow: none; transform: none;
+    border: 1px solid var(--line); border-radius: 6px;
+  }
+  .rb-right.collapsed { transform: none; }        /* always visible on desktop */
+  .rb-ham, .rb-ham-close { display: none; }        /* no hamburger needed */
+  /* center the middle column's generated images + room settings */
+  .rb-mid { text-align: center; }
+  .rb-render-bar { justify-content: center; }
+  .rb-renders { grid-template-columns: repeat(auto-fill, 320px); justify-content: center; }
+  .rb-pieces { grid-template-columns: repeat(auto-fill, 160px); justify-content: center; }
+}
+
 /* 980px: builder collapses to single column */
 @media (max-width: 980px) {
   .rb-body { grid-template-columns: 1fr; }
diff --git a/public/js/build.js b/public/js/build.js
index ccd9d9c..09353c9 100644
--- a/public/js/build.js
+++ b/public/js/build.js
@@ -57,7 +57,7 @@
     if (cat) parts.push('<span class="rb-chip" data-rmk="cat">' + cat + ' ✕</span>');
     if (brand) parts.push('<span class="rb-chip" data-rmk="brand">' + brand + ' ✕</span>');
     Object.keys(board).forEach(function (id) { var p = board[id]; parts.push('<span class="rb-chip prod" data-rm="' + id + '">' + (p.image_url ? '<img src="' + p.image_url + '">' : '') + (p.title || '').slice(0, 16) + ' ✕</span>'); });
-    $('rbChips').innerHTML = parts.join('') || '<span class="rb-hint">Pick a vibe on the left, ☰ Products to add pieces →</span>';
+    $('rbChips').innerHTML = parts.join('') || '<span class="rb-hint">Pick a vibe on the left, add pieces from Products on the right →</span>';
   }
 
   function query() {
diff --git a/server.js b/server.js
index 7e7f426..bb900e7 100644
--- a/server.js
+++ b/server.js
@@ -376,7 +376,7 @@ app.get('/build', (_req, res) => {
     <div class="rb-tray" id="rbTray" role="toolbar" aria-label="Room builder controls">
       <select id="rbRoom" aria-label="Room type"><option value="">Room…</option>${roomOpts}</select>
       <div class="rb-chips" id="rbChips" role="list" aria-label="Selected filters and pieces">
-        <span class="rb-hint">Pick a vibe on the left — open <strong>Products</strong> to add pieces →</span>
+        <span class="rb-hint">Pick a vibe on the left, add pieces from <strong>Products</strong> on the right →</span>
       </div>
       <input id="rbTitle" type="text" placeholder="Room name (optional)" aria-label="Room name">
       <button id="rbGo" class="cta" type="button" aria-label="Save and view this room">GO ▶</button>
@@ -395,7 +395,7 @@ app.get('/build', (_req, res) => {
         <div class="rb-renders" id="rbRenders" role="list" aria-label="Generated room settings" aria-live="polite">
           <div class="rb-render-ph">
             <span>Your generated room settings appear here.</span><br>
-            <small>Pick a vibe on the left, open <strong>Products</strong> to add pieces, then hit <strong>Generate</strong>. Make several, pick your favorite, and hit <strong>GO</strong> to save.</small>
+            <small>Pick a vibe on the left, add <strong>Products</strong> from the right, then hit <strong>Generate</strong>. Make several, pick your favorite, and hit <strong>GO</strong> to save.</small>
           </div>
         </div>
         <h4 class="rb-pieces-h" id="rbPiecesH" hidden>Shop the pieces in this room</h4>

← b7e8531 feat: shoppable hotspots on the live Room Builder gallery to · back to Interiordesignershowroom · feat(room): thumbnail rail beside the scene — stacked right bede8a7 →