From 8921b55c570bad25969af93d3d99cd697906e610 Mon Sep 17 00:00:00 2001
From: John Mizerek <mizerek@gmail.com>
Date: Sat, 7 Mar 2026 15:10:12 -0800
Subject: [PATCH] Fix header image preview to show full image with correct
 aspect ratio

Changed from cover/fixed-height to contain/aspect-ratio 3:1 so the
full 1200x400 header image is visible without cropping.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 portal/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/portal/index.html b/portal/index.html
index 303b984..9a52beb 100644
--- a/portal/index.html
+++ b/portal/index.html
@@ -641,7 +641,7 @@
                   <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: cover; background-position: center; background-repeat: no-repeat; border: 1px solid #ddd;"></div>
+                    <div id="headerPreview" style="width: 100%; aspect-ratio: 3/1; background: #f5f5f5; border-radius: 8px; margin-bottom: 8px; background-size: contain; background-position: center; background-repeat: no-repeat; border: 1px solid #ddd;"></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"/>