From 72e51ea10ca0d4a090fa827dbbb11fe7dd574bf5 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Fri, 1 Aug 2025 21:56:17 +0200
Subject: [PATCH] refactor: Improve ticket ID display in PurchaseTicketDialog
 and MyTickets

- Update PurchaseTicketDialog.vue and MyTickets.vue to enhance the presentation of ticket IDs.
- Wrap ticket ID text in a styled container for better visibility and formatting.
- Ensure consistent styling across components for a unified user experience.
---
 src/components/events/PurchaseTicketDialog.vue |  8 +++++---
 src/pages/MyTickets.vue                        | 16 ++++++++++++----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/events/PurchaseTicketDialog.vue b/src/components/events/PurchaseTicketDialog.vue
index 4005b38..c273c1d 100644
--- a/src/components/events/PurchaseTicketDialog.vue
+++ b/src/components/events/PurchaseTicketDialog.vue
@@ -229,9 +229,11 @@ onUnmounted(() => {
         <div class="bg-muted/50 rounded-lg p-4">
           <div class="flex flex-col items-center space-y-3">
             <img :src="ticketQRCode" alt="Ticket QR code" class="w-48 h-48 border rounded-lg" />
-            <div class="text-center">
-              <p class="text-xs text-muted-foreground">Ticket ID</p>
-              <p class="text-xs font-mono">{{ purchasedTicketId }}</p>
+            <div class="text-center w-full">
+              <p class="text-xs text-muted-foreground mb-1">Ticket ID</p>
+              <div class="bg-background border rounded px-2 py-1 max-w-full">
+                <p class="text-xs font-mono break-all">{{ purchasedTicketId }}</p>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/pages/MyTickets.vue b/src/pages/MyTickets.vue
index 7accfd9..21f11f2 100644
--- a/src/pages/MyTickets.vue
+++ b/src/pages/MyTickets.vue
@@ -190,7 +190,9 @@ onMounted(async () => {
                         </div>
                         <div class="text-center">
                           <p class="text-xs text-muted-foreground">Ticket ID</p>
-                          <p class="text-xs font-mono">{{ ticket.id }}</p>
+                          <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
+                            <p class="text-xs font-mono break-all">{{ ticket.id }}</p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -262,7 +264,9 @@ onMounted(async () => {
                         </div>
                         <div class="text-center">
                           <p class="text-xs text-muted-foreground">Ticket ID</p>
-                          <p class="text-xs font-mono">{{ ticket.id }}</p>
+                          <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
+                            <p class="text-xs font-mono break-all">{{ ticket.id }}</p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -330,7 +334,9 @@ onMounted(async () => {
                         </div>
                         <div class="text-center">
                           <p class="text-xs text-muted-foreground">Ticket ID</p>
-                          <p class="text-xs font-mono">{{ ticket.id }}</p>
+                          <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
+                            <p class="text-xs font-mono break-all">{{ ticket.id }}</p>
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -402,7 +408,9 @@ onMounted(async () => {
                         </div>
                         <div class="text-center">
                           <p class="text-xs text-muted-foreground">Ticket ID</p>
-                          <p class="text-xs font-mono">{{ ticket.id }}</p>
+                          <div class="bg-background border rounded px-2 py-1 max-w-full mt-1">
+                            <p class="text-xs font-mono break-all">{{ ticket.id }}</p>
+                          </div>
                         </div>
                       </div>
                     </div>