From 360edace722892001a62f87fac3ba2ea1a23a7ba Mon Sep 17 00:00:00 2001
From: Scott Pouliot <spouliot@scppowdercoating.com>
Date: Sat, 25 Apr 2026 19:16:40 -0400
Subject: [PATCH] Fix EnrollPrompt page layout squished on desktop
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The auth panel CSS (brand panel gradient, form panel flex centering, feature list,
subtext color) was only defined in Login.cshtml's @section Styles — not in the
shared auth layout. EnrollPrompt used the same class names but had no styles behind
them, so the two-column layout collapsed. Added matching styles in EnrollPrompt's
own @section Styles block.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../Views/Passkey/EnrollPrompt.cshtml         | 80 +++++++++++++++++++
 1 file changed, 80 insertions(+)

diff --git a/src/PowderCoating.Web/Views/Passkey/EnrollPrompt.cshtml b/src/PowderCoating.Web/Views/Passkey/EnrollPrompt.cshtml
index 83f9fc0..92a45ac 100644
--- a/src/PowderCoating.Web/Views/Passkey/EnrollPrompt.cshtml
+++ b/src/PowderCoating.Web/Views/Passkey/EnrollPrompt.cshtml
@@ -4,6 +4,86 @@
     var returnUrl = ViewBag.ReturnUrl as string ?? "/";
 }
 
+@section Styles {
+<style>
+    .auth-brand-panel {
+        background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        padding: 3rem 2.5rem;
+        color: white;
+    }
+
+    .auth-brand-panel h1 {
+        font-size: 2rem;
+        font-weight: 700;
+        margin-bottom: 0.75rem;
+        text-align: center;
+    }
+
+    .auth-brand-panel .tagline {
+        font-size: 1rem;
+        color: rgba(255,255,255,0.65);
+        margin-bottom: 2.5rem;
+        text-align: center;
+    }
+
+    .feature-list {
+        list-style: none;
+        padding: 0;
+        width: 100%;
+        max-width: 280px;
+    }
+
+    .feature-list li {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.6rem 0;
+        font-size: 0.95rem;
+        color: rgba(255,255,255,0.82);
+        border-bottom: 1px solid rgba(255,255,255,0.08);
+    }
+
+    .feature-list li:last-child { border-bottom: none; }
+
+    .feature-list li i {
+        color: #4fc3f7;
+        font-size: 1.1rem;
+        flex-shrink: 0;
+    }
+
+    .auth-form-panel {
+        flex-grow: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 2.5rem 1.5rem;
+        background-color: #ffffff;
+        min-height: 100vh;
+    }
+
+    .auth-form-container {
+        width: 100%;
+        max-width: 420px;
+    }
+
+    .auth-form-container h2 {
+        font-size: 1.75rem;
+        font-weight: 700;
+        color: #0f172a;
+    }
+
+    .auth-form-container .subtext {
+        color: #64748b;
+        font-size: 0.95rem;
+    }
+</style>
+}
+
 <div class="d-flex" style="min-height:100vh;">
     <!-- Left brand panel — hidden on mobile, same as login page -->
     <div class="col-lg-5 d-none d-lg-flex auth-brand-panel">