[object Object]

← back to Big Red

widget: move launcher + panel + tag from bottom-left to bottom-right

dc09b577a82fba4367979f290544867b2351fc10 · 2026-05-21 13:41:04 -0700 · Steve Abrams

Steve directive 2026-05-21. Flips all positioning rules (closed FAB, live-slide
calc, tagline, panel anchor, mobile overrides) from left→right. Panel slide-
out direction inverted accordingly so launcher now slides LEFT when open to
sit beside the panel.

Memory updated: lower-LEFT rule is RETIRED, canonical is now lower-RIGHT
across all 61 DW microsites — they pick up automatically since they all
load the same widget.js from chat.designerwallcoverings.com.

Files touched

Diff

commit dc09b577a82fba4367979f290544867b2351fc10
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu May 21 13:41:04 2026 -0700

    widget: move launcher + panel + tag from bottom-left to bottom-right
    
    Steve directive 2026-05-21. Flips all positioning rules (closed FAB, live-slide
    calc, tagline, panel anchor, mobile overrides) from left→right. Panel slide-
    out direction inverted accordingly so launcher now slides LEFT when open to
    sit beside the panel.
    
    Memory updated: lower-LEFT rule is RETIRED, canonical is now lower-RIGHT
    across all 61 DW microsites — they pick up automatically since they all
    load the same widget.js from chat.designerwallcoverings.com.
---
 public/widget.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/public/widget.js b/public/widget.js
index bbf1649..6feb18e 100644
--- a/public/widget.js
+++ b/public/widget.js
@@ -33,7 +33,7 @@
   const css = `
     .bigred-launcher {
       position: fixed;
-      left: 22px;
+      right: 22px;
       bottom: 22px;
       z-index: 99990;
       width: 64px;
@@ -49,12 +49,12 @@
         0 0 0 5px rgba(216,50,58,.18),
         0 8px 24px rgba(216,50,58,.5),
         0 2px 10px rgba(0,0,0,.4);
-      transition: left .26s cubic-bezier(.2,.7,.2,1), transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
+      transition: right .26s cubic-bezier(.2,.7,.2,1), transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
       animation: bigred-pulse-red 2.6s ease-in-out infinite;
     }
-    /* When the panel is open, launcher slides RIGHT of the panel so they sit
-       side-by-side hugging the left corner. */
-    .bigred-launcher.live { left: calc(22px + min(440px, calc(100vw - 44px)) + 12px); }
+    /* When the panel is open, launcher slides LEFT of the panel so they sit
+       side-by-side hugging the right corner. */
+    .bigred-launcher.live { right: calc(22px + min(440px, calc(100vw - 44px)) + 12px); }
     .bigred-launcher img {
       width: 100%; height: 100%; display: block;
       object-fit: cover; object-position: center 28%;
@@ -114,7 +114,7 @@
 
     .bigred-tag {
       position: fixed;
-      left: 96px;
+      right: 96px;
       bottom: 36px;
       z-index: 99990;
       pointer-events: none;
@@ -125,7 +125,7 @@
       color: #ff5560;
       text-shadow: 0 0 12px rgba(255,85,96,.55), 0 0 2px rgba(0,0,0,.6);
       opacity: 0;
-      transform: translateX(-6px);
+      transform: translateX(6px);
       transition: opacity .25s, transform .25s, color .25s, text-shadow .25s;
     }
     .bigred-launcher:hover + .bigred-tag { opacity: 1; transform: translateX(0); }
@@ -134,7 +134,7 @@
 
     .bigred-panel {
       position: fixed;
-      left: 22px;
+      right: 22px;
       bottom: 22px;
       z-index: 99991;
       width: min(440px, calc(100vw - 44px));
@@ -196,11 +196,11 @@
       flex: 1; width: 100%; border: 0; background: #1a0506;
     }
     @media (max-width: 640px) {
-      .bigred-launcher { left: 16px; bottom: 16px; width: 56px; height: 56px; }
+      .bigred-launcher { right: 16px; bottom: 16px; width: 56px; height: 56px; }
       /* On mobile there's no room for side-by-side — launcher hides behind
          the panel and reveals again on close. */
-      .bigred-launcher.live { left: 16px; opacity: 0; pointer-events: none; }
-      .bigred-tag { left: 80px; bottom: 28px; font-size: 9px; }
+      .bigred-launcher.live { right: 16px; opacity: 0; pointer-events: none; }
+      .bigred-tag { right: 80px; bottom: 28px; font-size: 9px; }
       .bigred-panel { left: 8px; right: 8px; bottom: 8px; width: auto; height: min(560px, calc(100vh - 40px)); }
     }
 

← c69895e add .deploy.conf so /deploy skill can ship aichat to Kamater  ·  back to Big Red  ·  fix(embed): string-escape parse error in embed.html — '\\' 9b0c0a8 →