From 7e44809a834be5a5817f5c576047355cd6b1a634 Mon Sep 17 00:00:00 2001
From: Jennie Robinson Faber <jennie@jenniefaber.com>
Date: Wed, 29 Apr 2026 18:22:45 +0100
Subject: [PATCH] fix(events): grid-align consent hint, drop magic 24px padding

---
 app/components/EventTicketPurchase.vue | 42 +++++++++++++++-----------
 1 file changed, 24 insertions(+), 18 deletions(-)

diff --git a/app/components/EventTicketPurchase.vue b/app/components/EventTicketPurchase.vue
index 10c33ef..e78652e 100644
--- a/app/components/EventTicketPurchase.vue
+++ b/app/components/EventTicketPurchase.vue
@@ -154,17 +154,19 @@
             securely
           </p>
 
-          <label class="consent-field">
-            <input
-              v-model="form.createAccount"
-              type="checkbox"
-              :disabled="processing"
-            >
-            <span>Create a free guest account so I can manage my registration</span>
-          </label>
-          <p class="field-hint consent-hint">
-            Guest accounts let you view your tickets and register faster next time. We won't add you to member communications.
-          </p>
+          <div class="consent-block">
+            <label class="consent-field">
+              <input
+                v-model="form.createAccount"
+                type="checkbox"
+                :disabled="processing"
+              >
+              <span>Create a free guest account so I can manage my registration</span>
+            </label>
+            <p class="field-hint consent-hint">
+              Guest accounts let you view your tickets and register faster next time. We won't add you to member communications.
+            </p>
+          </div>
 
           <button
             type="submit"
@@ -450,22 +452,26 @@ const formatEventDate = (date) => {
   margin-top: 2px;
 }
 
-.consent-field {
-  display: flex;
+.consent-block {
+  display: grid;
+  grid-template-columns: auto 1fr;
   align-items: flex-start;
-  gap: 8px;
+  column-gap: 8px;
+  row-gap: 4px;
+  margin-bottom: 14px;
+}
+.consent-field {
+  display: contents;
   font-size: 12px;
   color: var(--text);
-  margin-bottom: 4px;
   cursor: pointer;
 }
 .consent-field input[type="checkbox"] {
   margin-top: 3px;
-  flex-shrink: 0;
   accent-color: var(--candle);
 }
 .consent-hint {
-  margin-bottom: 14px;
-  padding-left: 24px;
+  grid-column: 2;
+  margin: 0;
 }
 </style>