Move Big Red widget to lower-LEFT corner (was anchored right, overlapped Zendesk Help pill)

fd274cf303cc9aa15750fe43b82d6e96bf802d03 · 2026-06-01 13:42:31 -0700 · Steve Abrams

Files touched

M public/widget.js

Diff

commit fd274cf303cc9aa15750fe43b82d6e96bf802d03
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Jun 1 13:42:31 2026 -0700

    Move Big Red widget to lower-LEFT corner (was anchored right, overlapped Zendesk Help pill)
---
 public/widget.js | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/widget.js b/public/widget.js
index 6feb18e..3edb06a 100644
--- a/public/widget.js
+++ b/public/widget.js
@@ -33,7 +33,7 @@
   const css = `
     .bigred-launcher {
       position: fixed;
-      right: 22px;
+      left: 22px;
       bottom: 22px;
       z-index: 99990;
       width: 64px;
@@ -52,9 +52,9 @@
       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 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); }
+    /* When the panel is open, launcher slides RIGHT of the panel so they sit
+       side-by-side hugging the lower-left corner. */
+    .bigred-launcher.live { left: 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;
-      right: 96px;
+      left: 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;
-      right: 22px;
+      left: 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 { right: 16px; bottom: 16px; width: 56px; height: 56px; }
+      .bigred-launcher { left: 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 { right: 16px; opacity: 0; pointer-events: none; }
-      .bigred-tag { right: 80px; bottom: 28px; font-size: 9px; }
+      .bigred-launcher.live { left: 16px; opacity: 0; pointer-events: none; }
+      .bigred-tag { left: 80px; bottom: 28px; font-size: 9px; }
       .bigred-panel { left: 8px; right: 8px; bottom: 8px; width: auto; height: min(560px, calc(100vh - 40px)); }
     }

← 0e3f87e Add per-site favicon (kills /favicon.ico 404) · back to Big Red · fix(port): align all config to live prod port 9936 (was 9935 9333465 →