From d86ca5a8949cfdb2c5827c66400c50da931a3561 Mon Sep 17 00:00:00 2001
From: John Mizerek <mizerek@gmail.com>
Date: Sun, 1 Feb 2026 07:45:46 -0800
Subject: [PATCH] Fix header image display on mobile and brand color preview

- Replace fixed 120px height with aspect-ratio padding (33.3%) so image
  scales properly on narrow mobile screens
- Use background-size: cover instead of contain for better fill
- Add wrapper div that shows brand color behind the header image
- Update saveBrandColor to also update the header wrapper background

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

diff --git a/portal/index.html b/portal/index.html
index 075a228..009a283 100644
--- a/portal/index.html
+++ b/portal/index.html
@@ -579,7 +579,9 @@
                   <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="headerPreview" style="width: 100%; height: 120px; background: #fff; border-radius: 8px; margin-bottom: 8px; background-size: contain; background-position: left center; background-repeat: no-repeat;"></div>
+                    <div id="headerPreviewWrapper" style="width: 100%; border-radius: 8px; margin-bottom: 8px; overflow: hidden; background: #fff;">
+                      <div id="headerPreview" style="width: 100%; padding-bottom: 33.3%; background-size: cover; background-position: left center; background-repeat: no-repeat;"></div>
+                    </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;">
                         <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M17 8l-5-5-5 5M12 3v12"/>
diff --git a/portal/portal.js b/portal/portal.js
index 05faad1..d1d05e7 100644
--- a/portal/portal.js
+++ b/portal/portal.js
@@ -742,6 +742,8 @@ const Portal = {
           this.brandColor = brandColor;
           const swatch = document.getElementById('brandColorSwatch');
           if (swatch) swatch.style.background = brandColor;
+          const headerWrapper = document.getElementById('headerPreviewWrapper');
+          if (headerWrapper) headerWrapper.style.background = brandColor;
         }
 
         // Load header preview
@@ -1243,6 +1245,8 @@ const Portal = {
         this.brandColor = color;
         const swatch = document.getElementById('brandColorSwatch');
         if (swatch) swatch.style.background = color;
+        const headerWrapper = document.getElementById('headerPreviewWrapper');
+        if (headerWrapper) headerWrapper.style.background = color;
         this.closeModal();
         this.toast('Brand color saved!', 'success');
       } else {