From 80b4c0da5299f2b48d25e31f980197514426c3c0 Mon Sep 17 00:00:00 2001
From: John Mizerek <mizerek@gmail.com>
Date: Sun, 1 Feb 2026 07:59:21 -0800
Subject: [PATCH] Fix header image and brand color swatch on mobile

- Hide wrapper div instead of img (avoids mobile empty-src issues)
- Use img onload handler to show wrapper after image loads
- Use backgroundColor instead of background shorthand for swatch

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 portal/index.html |  6 +++---
 portal/portal.js  | 14 ++++++++++----
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/portal/index.html b/portal/index.html
index 35d1db3..14cb578 100644
--- a/portal/index.html
+++ b/portal/index.html
@@ -579,8 +579,8 @@
                   <div>
                     <label style="display: block; margin-bottom: 8px; font-weight: 500;">Header Image</label>
                     <p style="color: #666; font-size: 13px; margin-bottom: 8px;">Displayed at the top of your menu. Recommended: 1200x400px</p>
-                    <div id="headerPreviewWrapper" style="max-width: 1200px; border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: #fff;">
-                      <img id="headerPreview" src="" alt="" style="width: 100%; display: none;">
+                    <div id="headerPreviewWrapper" style="max-width: 1200px; border-radius: 8px; margin-bottom: 8px; overflow: hidden; background-color: #fff; display: none;">
+                      <img id="headerPreview" src="" alt="" style="width: 100%; display: block;">
                     </div>
                     <button class="btn btn-secondary" onclick="Portal.uploadHeader()" style="width: 100%;">
                       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 8px;">
@@ -593,7 +593,7 @@
                     <label style="display: block; margin-bottom: 8px; font-weight: 500;">Brand Color</label>
                     <p style="color: #666; font-size: 13px; margin-bottom: 8px;">Used for accents and fallback backgrounds</p>
                     <div style="display: flex; gap: 12px; align-items: center;">
-                      <div id="brandColorSwatch" style="min-width: 40px; width: 40px; min-height: 40px; height: 40px; border-radius: 8px; background: #1B4D3E; border: 2px solid rgba(0,0,0,0.1); cursor: pointer; flex-shrink: 0;" onclick="Portal.showBrandColorPicker()"></div>
+                      <div id="brandColorSwatch" style="min-width: 40px; width: 40px; min-height: 40px; height: 40px; border-radius: 8px; background-color: #1B4D3E; border: 2px solid rgba(0,0,0,0.1); cursor: pointer; flex-shrink: 0;" onclick="Portal.showBrandColorPicker()"></div>
                       <button class="btn btn-secondary" onclick="Portal.showBrandColorPicker()" style="flex: 1;">
                         Change Color
                       </button>
diff --git a/portal/portal.js b/portal/portal.js
index c767d02..19fd334 100644
--- a/portal/portal.js
+++ b/portal/portal.js
@@ -741,15 +741,18 @@ const Portal = {
         if (brandColor) {
           this.brandColor = brandColor;
           const swatch = document.getElementById('brandColorSwatch');
-          if (swatch) swatch.style.background = brandColor;
+          if (swatch) swatch.style.backgroundColor = brandColor;
         }
 
         // Load header preview
         const headerPreview = document.getElementById('headerPreview');
+        const headerWrapper = document.getElementById('headerPreviewWrapper');
         const headerUrl = biz.HEADERIMAGEURL || biz.HeaderImageURL;
         if (headerPreview && headerUrl) {
+          headerPreview.onload = function() {
+            if (headerWrapper) headerWrapper.style.display = 'block';
+          };
           headerPreview.src = `${headerUrl}?t=${Date.now()}`;
-          headerPreview.style.display = 'block';
         }
 
         // Render hours editor
@@ -1164,9 +1167,12 @@ const Portal = {
           this.toast('Header uploaded successfully!', 'success');
           // Update preview using the URL from the response
           const preview = document.getElementById('headerPreview');
+          const wrapper = document.getElementById('headerPreviewWrapper');
           if (preview && data.HEADERURL) {
+            preview.onload = function() {
+              if (wrapper) wrapper.style.display = 'block';
+            };
             preview.src = `${BASE_PATH}${data.HEADERURL}?t=${Date.now()}`;
-            preview.style.display = 'block';
           }
         } else {
           this.toast(data.MESSAGE || 'Failed to upload header', 'error');
@@ -1244,7 +1250,7 @@ const Portal = {
       if (data.OK) {
         this.brandColor = color;
         const swatch = document.getElementById('brandColorSwatch');
-        if (swatch) swatch.style.background = color;
+        if (swatch) swatch.style.backgroundColor = color;
         this.closeModal();
         this.toast('Brand color saved!', 'success');
       } else {