From b86fee86dfac66c68327cf4b72acc982f90ba1d4 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Fri, 3 Jul 2026 14:58:54 +0000
Subject: [PATCH] Cap public landing page logos at half the viewport width on
 mobile.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 resources/css/app.css                       |  6 ++++++
 resources/views/public/qr/landing.blade.php | 10 ++++++----
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 35c8c02..6184abc 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -15,6 +15,12 @@
     display: none !important;
 }
 
+@media (max-width: 639px) {
+    .public-brand-logo {
+        max-width: 50vw;
+    }
+}
+
 /* QR create/show: flush mobile action bar to the physical screen bottom (mobile only) */
 @media (max-width: 1023px) {
     .mobile-action-bar {
diff --git a/resources/views/public/qr/landing.blade.php b/resources/views/public/qr/landing.blade.php
index 38036bb..509f23d 100644
--- a/resources/views/public/qr/landing.blade.php
+++ b/resources/views/public/qr/landing.blade.php
@@ -216,7 +216,8 @@
             @if($bizHasLogo)
                 <div style="width:104px; height:104px; border-radius:20px; background:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.14); border:4px solid #fff; overflow:hidden; display:flex; align-items:center; justify-content:center;">
                     <img src="{{ $bizLogoUrl }}" alt="{{ $bizName }}"
-                         style="width:100%; height:100%; object-fit:contain; padding:8px;">
+                         class="public-brand-logo"
+                         style="width:100%; height:100%; max-width:100%; object-fit:contain; padding:8px;">
                 </div>
             @else
                 <div style="width:104px; height:104px; border-radius:20px; background:{{ $bizColor }}; box-shadow:0 8px 32px rgba(0,0,0,0.18); border:4px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.5rem; font-weight:900;">
@@ -389,7 +390,8 @@
             @if($churchHasLogo)
                 <div style="width:104px; height:104px; border-radius:20px; background:#fff; box-shadow:0 8px 32px rgba(0,0,0,0.14); border:4px solid #fff; overflow:hidden; display:flex; align-items:center; justify-content:center;">
                     <img src="{{ $churchLogoUrl }}" alt="{{ $churchName }}"
-                         style="width:100%; height:100%; object-fit:contain; padding:8px;">
+                         class="public-brand-logo"
+                         style="width:100%; height:100%; max-width:100%; object-fit:contain; padding:8px;">
                 </div>
             @else
                 <div style="width:104px; height:104px; border-radius:20px; background:{{ $churchColor }}; box-shadow:0 8px 32px rgba(0,0,0,0.18); border:4px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; font-size:2rem; font-weight:900;">
@@ -686,7 +688,7 @@
         @endif
         <div class="relative flex min-h-[230px] flex-col items-center justify-end px-6 pb-7 text-center text-white">
             @if($evHasLogo)
-                <img src="{{ $evLogoUrl }}" alt="{{ $evName }}" class="mb-3 h-16 w-16 rounded-2xl bg-white object-contain p-1 shadow-lg ring-2 ring-white/40">
+                <img src="{{ $evLogoUrl }}" alt="{{ $evName }}" class="public-brand-logo mb-3 h-16 w-16 max-w-[50vw] rounded-2xl bg-white object-contain p-1 shadow-lg ring-2 ring-white/40">
             @else
                 <div class="mb-3 flex h-16 w-16 items-center justify-center rounded-2xl text-xl font-black text-white shadow-lg ring-2 ring-white/40" style="background:rgba(255,255,255,0.18); backdrop-filter:blur(6px);">{{ $evInitials }}</div>
             @endif
@@ -1234,7 +1236,7 @@
         <div class="flex items-end gap-4">
             @if($hasLogo)
                 <img src="{{ $logoUrl }}" alt="{{ $title }}"
-                     class="h-16 w-16 flex-shrink-0 rounded-2xl object-cover shadow-lg ring-2 ring-white/30">
+                     class="public-brand-logo h-16 w-16 max-w-[50vw] flex-shrink-0 rounded-2xl object-cover shadow-lg ring-2 ring-white/30">
             @else
                 <div class="flex h-16 w-16 flex-shrink-0 items-center justify-center rounded-2xl shadow-lg ring-2 ring-white/30 text-2xl font-black text-white"
                      style="background: rgba(255,255,255,0.2); backdrop-filter: blur(8px);">