From de2ad0d3938a89582ea91e761922e69a1d1e4c10 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Sun, 7 Jun 2026 15:23:50 +0000
Subject: [PATCH] Fix QR show/create mobile layout and action bar styling.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Port the monolith QR mobile CSS (fixed bottom bar, safe-area inset, page background) and restore horizontal padding on create/show pages — shared with Ladill Events.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 resources/css/app.css                  | 62 ++++++++++++++++++++++++++
 resources/views/layouts/user.blade.php |  2 +-
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/resources/css/app.css b/resources/css/app.css
index 3f3c8d4..ed9643f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -14,3 +14,65 @@
 [x-cloak] {
     display: none !important;
 }
+
+/* QR create/show: flush mobile action bar to the physical screen bottom (mobile only) */
+@media (max-width: 1023px) {
+    .mobile-action-bar {
+        position: fixed;
+        inset-inline: 0;
+        bottom: 0;
+        z-index: 50;
+        display: flex;
+        flex-direction: column;
+        background-color: #fff;
+    }
+
+    .mobile-action-bar__toolbar {
+        display: flex;
+        height: 4rem;
+        flex-shrink: 0;
+        align-items: center;
+        gap: 0.75rem;
+        border-top: 1px solid rgb(226 232 240);
+        background-color: #fff;
+        padding-inline: 1rem;
+    }
+
+    .mobile-action-bar__inset-fill {
+        flex-shrink: 0;
+        width: 100%;
+        background-color: #fff;
+        height: env(safe-area-inset-bottom, 0px);
+        min-height: max(env(safe-area-inset-bottom, 0px), 20px);
+    }
+}
+
+/* Extra white bleed behind the bar for any remaining viewport gap on mobile */
+.qr-mobile-bottom-bleed {
+    position: fixed;
+    inset-inline: 0;
+    bottom: 0;
+    z-index: 48;
+    pointer-events: none;
+    background-color: #fff;
+    height: calc(4rem + env(safe-area-inset-bottom, 0px) + 24px);
+    min-height: calc(4rem + 24px);
+}
+
+html.qr-mobile-page {
+    background-color: #fff;
+}
+
+html.qr-mobile-page body {
+    background-color: #fff;
+}
+
+.mobile-stats-card {
+    width: calc(66.666667% - 0.5rem);
+}
+
+@media (min-width: 640px) {
+    .mobile-stats-card {
+        width: auto;
+    }
+}
diff --git a/resources/views/layouts/user.blade.php b/resources/views/layouts/user.blade.php
index 00601f0..2b12cd1 100644
--- a/resources/views/layouts/user.blade.php
+++ b/resources/views/layouts/user.blade.php
@@ -45,7 +45,7 @@
 
             <main @class([
                 'flex-1 lg:p-6 lg:pb-6',
-                'p-0 max-lg:pb-[calc(4rem+max(env(safe-area-inset-bottom,0px),20px))]' => $qrMobilePage,
+                'px-4 pt-4 max-lg:pb-[calc(4rem+max(env(safe-area-inset-bottom,0px),20px))]' => $qrMobilePage,
                 'p-0 pb-24 lg:p-6 lg:pb-6' => $mobileFullScreenPage && ! $qrMobilePage,
                 'p-6 pb-24 lg:pb-6' => ! $mobileFullScreenPage,
             ])>