From f1f140f2bc6acd624a4a02c5bf407451b6eadb67 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 23 Apr 2025 21:41:32 +0200
Subject: [PATCH] Reduced some spacing on mobile

---
 assets/_typography.css                        |  4 +++
 assets/main.css                               |  1 +
 .../calendar/dialog/QuickCreateEvent.vue      |  2 +-
 components/calendar/event/Details.vue         | 11 ++++--
 components/calendar/event/Event.vue           |  2 +-
 components/calendar/state/monthly/DayTile.vue | 36 ++++++++++++-------
 6 files changed, 38 insertions(+), 18 deletions(-)
 create mode 100644 assets/_typography.css

diff --git a/assets/_typography.css b/assets/_typography.css
new file mode 100644
index 0000000..2362fc6
--- /dev/null
+++ b/assets/_typography.css
@@ -0,0 +1,4 @@
+@theme inline {
+  --text-2xs: 0.7rem;
+  --text-2xs--line-height: 0.75rem;
+}
diff --git a/assets/main.css b/assets/main.css
index 85bc613..5601a45 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -3,6 +3,7 @@
 @config '../tailwind.config.js';
 
 @import "./theme.css" layer(theme);
+@import "./_typography.css" layer(theme);
 @import "./_colors.css" layer(theme);
 @import "./_colors.css" layer(utilities);
 
diff --git a/components/calendar/dialog/QuickCreateEvent.vue b/components/calendar/dialog/QuickCreateEvent.vue
index 486501f..875c11d 100644
--- a/components/calendar/dialog/QuickCreateEvent.vue
+++ b/components/calendar/dialog/QuickCreateEvent.vue
@@ -24,7 +24,7 @@ const breakpoints = useBreakpoints(
 
 <template>
   <UiButton
-    class="max-md:fixed max-md:bottom-16 max-md:right-8 max-md:z-50 max-md:size-12 max-md:shadow"
+    class="max-md:fixed max-md:bottom-8 max-md:right-8 max-md:z-50 max-md:size-14 max-md:rounded-xl"
     :size="breakpoints.lg.value ? 'default' : 'icon'"
     @click="toggleDialog"
   >
diff --git a/components/calendar/event/Details.vue b/components/calendar/event/Details.vue
index f53da10..fb0110a 100644
--- a/components/calendar/event/Details.vue
+++ b/components/calendar/event/Details.vue
@@ -3,6 +3,7 @@ import { cn } from "~/lib/utils"
 import type { RPGDate } from "~/models/Date"
 import type { CalendarEvent } from "~/models/CalendarEvent"
 import { useCalendar } from "~/stores/CalendarStore"
+import { breakpointsTailwind, useBreakpoints } from "@vueuse/core"
 
 import {
   PhHourglassMedium,
@@ -24,6 +25,10 @@ const props = defineProps<{
   isEndEvent?: boolean
 }>()
 
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
+
 // Ref for the popover
 const eventDetails = ref<HTMLElement>()
 
@@ -64,9 +69,9 @@ function deployDeleteModal() {
   <UiPopoverContent
     class="w-96 event-popover"
     :align="'center'"
-    :align-offset="50"
-    :side="'left'"
-    :collision-padding="60"
+    :align-offset="breakpoints.lg.value ? 50 : 25"
+    :side="breakpoints.lg.value ? 'left' : 'top'"
+    :collision-padding="breakpoints.lg.value ? 50 : 25"
     :hide-when-detached="true"
     :class="cn(
       event.category ? `element-${event.category.color}` : '',
diff --git a/components/calendar/event/Event.vue b/components/calendar/event/Event.vue
index b765cc5..c708861 100644
--- a/components/calendar/event/Event.vue
+++ b/components/calendar/event/Event.vue
@@ -55,7 +55,7 @@ onMounted(() => {
   <UiPopover v-model:open="isPopoverDetailsOpen">
     <UiPopoverTrigger as-child>
       <button
-        class="event-button text-xs px-2 py-1 block w-full text-left rounded-sm transition-colors outline-offset-1 cursor-pointer"
+        class="event-button text-2xs md:text-xs px-[5px] py-[5px] md:px-2 md:py-1 block w-full text-left rounded-sm transition-colors outline-offset-1 cursor-pointer"
         :class="
           cn(
             `element-${event.category?.color}`,
diff --git a/components/calendar/state/monthly/DayTile.vue b/components/calendar/state/monthly/DayTile.vue
index bb39c48..d766269 100644
--- a/components/calendar/state/monthly/DayTile.vue
+++ b/components/calendar/state/monthly/DayTile.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { RPGDate } from "~/models/Date"
 import type { CalendarEvent } from "~/models/CalendarEvent"
-import { useElementBounding } from "@vueuse/core"
+import { breakpointsTailwind, useElementBounding } from "@vueuse/core"
 import { storeToRefs } from "pinia"
 import { computed, ref, type ComputedRef } from "vue"
 
@@ -15,9 +15,13 @@ const props = defineProps<{
 const calendarTile = ref()
 const calendarEventsList = ref()
 
-const { defaultDate, selectDate, areDatesIdentical } = useCalendar()
+const { defaultDate, selectDate, areDatesIdentical, getFormattedDateTitle } = useCalendar()
 const { selectedDate, currentEvents, isReadOnly } = storeToRefs(useCalendar())
 
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
+
 /**
  * All events with a startDate / endDate that starts or ends on the tile
  */
@@ -73,22 +77,22 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
 <template>
   <div
     ref="calendarTile"
-    class="tile relative text-xs p-2"
+    class="tile relative p-1 md:p-2"
     :class="{
       'text-slate-300 dark:text-slate-500': props.faded,
       'text-slate-500 dark:text-slate-300': !props.faded
     }"
   >
     <button
-      class="relative z-10 group block w-full text-center cursor-pointer"
+      class="relative z-10 group block w-full text-2xs md:text-xs text-center cursor-pointer"
       @click="selectDate(date)"
     >
       <ClientOnly>
         <span
-          class="inline-flex w-8 h-8 aspect-square items-center justify-center rounded-full border-2 border-transparent font-bold transition-colors group-hover:border-indigo-300 dark:group-hover:border-indigo-700"
+          class="inline-flex size-7 md:size-8 aspect-square items-center justify-center rounded-full border-1 md:border-2 border-transparent font-bold transition-colors group-hover:border-indigo-300 dark:group-hover:border-indigo-700"
           :class="{
-            'text-white bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
-            'text-white bg-indigo-500': isSelectedDate
+            'text-background bg-slate-600 dark:bg-slate-800': isDefaultDate && !isSelectedDate,
+            'text-background bg-indigo-500': isSelectedDate
           }"
         >
           {{ date.day }}
@@ -99,7 +103,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
     <ClientOnly>
       <ul
         ref="calendarEventsList"
-        class="absolute top-12 bottom-2 inset-x-2 grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity"
+        class="absolute top-9 md:top-12 bottom-1 md:bottom-2 inset-x-2 grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity"
         :class="{
           'opacity-40': props.faded && !isSelectedDate
         }"
@@ -114,17 +118,23 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
           <UiPopover>
             <UiPopoverTrigger as-child>
               <button
-                class="text-xs px-2 py-1 block w-full text-left font-bold rounded-sm whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer transition-colors hover:bg-slate-800"
+                class="text-2xs md:text-xs px-[5px] py-[5px] md:px-2 md:py-1 block w-full text-left font-bold rounded-sm whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer transition-colors hover:text-foreground hover:bg-foreground/10"
               >
                 {{ eventsNotDisplayed }} autre{{ eventsNotDisplayed > 1 ? 's' : '' }}
               </button>
             </UiPopoverTrigger>
-            <UiPopoverContent class="w-80" :align="'center'" :side="'right'">
-              <div class="text-center mb-4">
+            <UiPopoverContent
+              class="w-80"
+              :align="'center'"
+              :align-offset="breakpoints.lg.value ? 50 : 25"
+              :collision-padding="breakpoints.lg.value ? 50 : 25"
+              :side="breakpoints.lg.value ? 'left' : 'bottom'"
+              >
+              <div class="text-center mb-2">
                 <span
-                  class="inline-flex w-12 h-12 aspect-square items-center justify-center text-lg font-semibold text-slate-300 bg-slate-800 rounded-full"
+                  class="text-lg font-semibold rounded-full"
                 >
-                  {{ date.day }}
+                  {{ getFormattedDateTitle(date, true) }}
                 </span>
               </div>
               <ul class="grid auto-rows-min gap-1 z-10 pointer-events-none transition-opacity">