Fix EventsPage button layout for mobile view

- Updated the layout of the EventsPage component to improve responsiveness, including adjustments to flex properties and spacing.
- Modified heading sizes for better visibility on different screen sizes.
- Improved user feedback for authentication status with dynamic text based on screen size.
- Ensured button labels adapt to screen size for a more streamlined user experience.

These changes enhance the overall usability and accessibility of the EventsPage component.

src/modules/events/views/EventsPage.vue

@@ -127,27 +127,31 @@ function handleEventCreated() {
 
   <!-- Events Content - Only render when module is ready -->
   <div v-else class="container mx-auto py-8 px-4">
-    <div class="flex justify-between items-center mb-6">
+    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-6">
       <div class="space-y-1">
-        <h1 class="text-3xl font-bold text-foreground">Events</h1>
+        <h1 class="text-2xl sm:text-3xl font-bold text-foreground">Events</h1>
         <div v-if="isAuthenticated && userDisplay" class="flex items-center gap-2 text-sm text-muted-foreground">
           <User class="w-4 h-4" />
-          <span>Logged in as {{ userDisplay.name }}</span>
+          <span class="hidden xs:inline">Logged in as {{ userDisplay.name }}</span>
+          <span class="xs:hidden">{{ userDisplay.name }}</span>
           <Badge variant="outline" class="text-xs">{{ userDisplay.shortId }}</Badge>
         </div>
         <div v-else class="flex items-center gap-2 text-sm text-muted-foreground">
           <LogIn class="w-4 h-4" />
-          <span>Please log in to purchase tickets</span>
+          <span class="hidden xs:inline">Please log in to purchase tickets</span>
+          <span class="xs:hidden">Login required</span>
         </div>
       </div>
-      <div class="flex gap-2">
+      <div class="flex gap-2 sm:flex-shrink-0">
-        <Button v-if="isAuthenticated" variant="default" size="sm" @click="showCreateDialog = true">
+        <Button v-if="isAuthenticated" variant="default" size="sm" @click="showCreateDialog = true" class="flex-1 sm:flex-none">
-          <Plus class="w-4 h-4 mr-2" />
+          <Plus class="w-4 h-4" />
-          Create Event
+          <span class="ml-2 hidden xs:inline">Create Event</span>
+          <span class="ml-2 xs:hidden">Create</span>
         </Button>
-        <Button variant="secondary" size="sm" @click="refresh" :disabled="isLoading">
+        <Button variant="secondary" size="sm" @click="refresh" :disabled="isLoading" class="flex-1 sm:flex-none">
-          <RefreshCw class="w-4 h-4 mr-2" :class="{ 'animate-spin': isLoading }" />
+          <RefreshCw class="w-4 h-4" :class="{ 'animate-spin': isLoading }" />
-          Refresh
+          <span class="ml-2 hidden xs:inline">Refresh</span>
+          <span class="ml-2 xs:hidden">Refresh</span>
         </Button>
       </div>
     </div>