From 72aabf542935c704c5ea80e807382cce83b741a9 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Wed, 15 Jul 2026 21:23:24 +0000
Subject: [PATCH] Fit promo image fully inside the customer display card.

Center and clamp the image with object-contain so it scales within the
card bounds without cropping or overflowing.
---
 resources/views/pos/customer-display.blade.php | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/views/pos/customer-display.blade.php b/resources/views/pos/customer-display.blade.php
index 1eaccf5..913fe79 100644
--- a/resources/views/pos/customer-display.blade.php
+++ b/resources/views/pos/customer-display.blade.php
@@ -57,11 +57,12 @@
                 {{-- Promo with image: large hero + copy (side-by-side on landscape kiosks) --}}
                 <div x-show="!!state.promo?.image_url"
                      class="flex min-h-0 flex-1 flex-col gap-4 p-4 sm:gap-5 sm:p-6 lg:flex-row lg:items-stretch lg:gap-8 lg:p-8">
-                    <div class="relative flex min-h-0 max-h-[52vh] flex-[1.35] items-center justify-center overflow-hidden rounded-[1.75rem] bg-white shadow-[0_20px_50px_-24px_rgba(15,23,42,0.28)] ring-1 ring-slate-200/90 sm:max-h-[56vh] sm:rounded-[2rem] lg:max-h-none lg:flex-1">
+                    {{-- Flex-sized card; image absolutely centered and scaled to fit (object-contain) --}}
+                    <div class="relative min-h-0 max-h-[52vh] flex-[1.35] overflow-hidden rounded-[1.75rem] bg-white shadow-[0_20px_50px_-24px_rgba(15,23,42,0.28)] ring-1 ring-slate-200/90 sm:max-h-[56vh] sm:rounded-[2rem] lg:max-h-none lg:flex-1">
                         <div class="pointer-events-none absolute inset-0 bg-gradient-to-br from-slate-50 via-white to-indigo-50/30"></div>
                         <img :src="state.promo?.image_url"
                              :alt="state.promo?.headline || state.location_name || 'Promo'"
-                             class="relative z-[1] h-full w-full object-contain object-center p-3 sm:p-5 lg:p-6">
+                             class="absolute left-1/2 top-1/2 z-[1] max-h-[calc(100%-1.5rem)] max-w-[calc(100%-1.5rem)] -translate-x-1/2 -translate-y-1/2 object-contain object-center sm:max-h-[calc(100%-2rem)] sm:max-w-[calc(100%-2rem)] lg:max-h-[calc(100%-2.5rem)] lg:max-w-[calc(100%-2.5rem)]">
                     </div>
                     <div class="flex shrink-0 flex-col justify-center gap-3.5 px-1 pb-1 text-center sm:gap-4 sm:px-2 lg:w-[min(36%,24rem)] lg:px-1 lg:pb-0 lg:text-left xl:w-[min(34%,26rem)]">
                         <div>