From 9941bacaf12d5155731f314cb6abe02e9e3b37a7 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Tue, 16 Jun 2026 01:12:58 +0200
Subject: [PATCH] fix(events): move My Tickets upcoming/past toggle off the
 hamburger
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The toggle sat in the header's top-right corner, where it collided with
the fixed top-right hamburger menu (the Past button rendered behind it).
Move it to its own left-aligned row above the tabs — same approach the
calendar page uses to clear the hamburger.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/views/MyTicketsPage.vue | 45 +++++++++++-----------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/modules/events/views/MyTicketsPage.vue b/src/modules/events/views/MyTicketsPage.vue
index d394a2e..94e851f 100644
--- a/src/modules/events/views/MyTicketsPage.vue
+++ b/src/modules/events/views/MyTicketsPage.vue
@@ -167,7 +167,7 @@ onMounted(async () => {
 
 <template>
   <div class="container mx-auto py-8 px-4">
-    <div class="flex justify-between items-start gap-3 mb-6">
+    <div class="flex justify-between items-center mb-6">
       <div class="space-y-1">
         <h1 class="text-3xl font-bold text-foreground">My Tickets</h1>
         <div v-if="isAuthenticated && userDisplay" class="flex items-center gap-2 text-sm text-muted-foreground">
@@ -180,27 +180,6 @@ onMounted(async () => {
           <span>Please log in to view your tickets</span>
         </div>
       </div>
-
-      <!-- Upcoming/Past toggle — defaults to upcoming so the list isn't
-           cluttered with events that already happened. -->
-      <div v-if="isAuthenticated && tickets.length > 0" class="inline-flex shrink-0 rounded-md border p-0.5">
-        <Button
-          :variant="!showPast ? 'default' : 'ghost'"
-          size="sm"
-          class="h-7"
-          @click="showPast = false"
-        >
-          Upcoming
-        </Button>
-        <Button
-          :variant="showPast ? 'default' : 'ghost'"
-          size="sm"
-          class="h-7"
-          @click="showPast = true"
-        >
-          Past
-        </Button>
-      </div>
     </div>
 
     <div v-if="!isAuthenticated" class="text-center py-12">
@@ -226,6 +205,28 @@ onMounted(async () => {
     </div>
 
     <div v-else-if="tickets.length > 0">
+      <!-- Upcoming/Past toggle — own row, left-aligned so it clears the
+           fixed top-right hamburger menu. Defaults to upcoming so the
+           list isn't cluttered with events that already happened. -->
+      <div class="mb-4 inline-flex rounded-md border p-0.5">
+        <Button
+          :variant="!showPast ? 'default' : 'ghost'"
+          size="sm"
+          class="h-7"
+          @click="showPast = false"
+        >
+          Upcoming
+        </Button>
+        <Button
+          :variant="showPast ? 'default' : 'ghost'"
+          size="sm"
+          class="h-7"
+          @click="showPast = true"
+        >
+          Past
+        </Button>
+      </div>
+
       <Tabs default-value="all" class="w-full">
         <TabsList class="grid w-full grid-cols-4">
           <TabsTrigger value="all">All ({{ visibleCounts.all }})</TabsTrigger>