Mobile UX improvements for calendar

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -184,7 +184,7 @@ defineExpose({ forceReload })
 <template>
     <div v-if="loaded">
         <!-- Header -->
-        <div class="flex items-center justify-between gap-3 border-b px-4 py-3 ">
+        <div class="flex items-center justify-between gap-3 border-b border-border px-4 py-3 ">
             <h2 class="text-lg font-semibold break-after-all">
                 {{ activeEvent?.name || 'Event' }}
             </h2>
@@ -232,14 +232,14 @@ defineExpose({ forceReload })
                 </div>
             </section>
             <section v-if="isPast && userStore.state === 'member'" class="w-full">
-                <ButtonGroup class="flex w-full">
+                <ButtonGroup class="flex w-full justify-center">
-                    <Button variant="outline"
+                    <Button variant="outline" class="flex-1"
                         :class="myAttendance?.status === CalendarAttendance.Attending ? 'border-2 border-primary text-primary' : ''"
                         @click="setAttendance(CalendarAttendance.Attending)">Going</Button>
-                    <Button variant="outline"
+                    <Button variant="outline" class="flex-1"
                         :class="myAttendance?.status === CalendarAttendance.Maybe ? 'border-2 !border-l-2 border-primary text-primary' : ''"
                         @click="setAttendance(CalendarAttendance.Maybe)">Maybe</Button>
-                    <Button variant="outline"
+                    <Button variant="outline" class="flex-1"
                         :class="myAttendance?.status === CalendarAttendance.NotAttending ? 'border-2 !border-l-2 border-primary text-primary' : ''"
                         @click="setAttendance(CalendarAttendance.NotAttending)">Declined</Button>
                 </ButtonGroup>
@@ -264,7 +264,7 @@ defineExpose({ forceReload })
             <!-- Description -->
             <section class="space-y-2 w-full">
                 <p class="text-lg font-semibold">Description</p>
-                <p class="border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2 whitespace-pre-line">
+                <p class="border border-border bg-muted/50 px-3 py-2 rounded-lg min-h-24 my-2 whitespace-pre-line">
                     {{ activeEvent.description }}
                 </p>
             </section>
@@ -278,8 +278,8 @@ defineExpose({ forceReload })
                         <p>Declined <span class="ml-1">{{ attendanceStatusSummary.notAttending }}</span></p>
                     </div> -->
                 </div>
-                <div class="flex flex-col border bg-muted/50 rounded-lg min-h-24 my-2">
+                <div class="flex flex-col border border-border bg-muted/50 rounded-lg min-h-24 my-2">
-                    <div class="flex w-full pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
+                    <div class="flex w-full pt-2 border-b border-border *:w-full *:text-center *:pb-1 *:cursor-pointer">
                         <label :class="attendanceTab === 'Alpha' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
                             @click="attendanceTab = 'Alpha'">Alpha {{ attendanceCountsByGroup.Alpha }}</label>
                         <label :class="attendanceTab === 'Echo' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
@@ -288,7 +288,7 @@ defineExpose({ forceReload })
                             @click="attendanceTab = 'Other'">Other {{ attendanceCountsByGroup.Other }}</label>
                     </div>
                     <div class="pb-1 min-h-48">
-                        <div class="grid grid-cols-2 font-semibold text-muted-foreground border-b py-1 px-3 mb-2">
+                        <div class="grid grid-cols-2 font-semibold text-muted-foreground border-b border-border py-1 px-3 mb-2">
                             <p>Name</p>
                             <p class="text-right">Status</p>
                         </div>

ui/src/components/ui/button/index.js

@@ -16,7 +16,7 @@ export const buttonVariants = cva(
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-accent active:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         success:
           "bg-success text-success-foreground shadow-xs hover:bg-success/90",
         link: "text-primary underline-offset-4 hover:underline",

ui/src/pages/Calendar.vue

@@ -155,7 +155,7 @@ onMounted(() => {
     <div>
         <CreateCalendarEvent ref="dialogRef" @reload="loadEvents(); eventViewRef.forceReload();"></CreateCalendarEvent>
         <div class="flex">
-            <div class="flex-1 min-h-0 mt-5">
+            <div class="flex-1 min-h-0 mt-5" :class="{ 'hidden md:block': panelOpen }">
                 <div class="h-[80vh] min-h-0">
                     <!-- calendar header -->
                     <div class="flex items-center justify-between mx-5">
@@ -208,7 +208,7 @@ onMounted(() => {
                 </div>
             </div>
             <aside v-if="panelOpen"
-                class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
+                class="w-screen 3xl:w-lg 2xl:w-md lg:border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
                 :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
                 <ViewCalendarEvent ref="eventViewRef" :key="currentEventID" @close="() => { router.push('/calendar'); }"
                     @reload="loadEvents()" @load="calendarRef.getApi().updateSize()" @edit="(val) => { dialogRef.openDialog(null, 'edit', val) }">