Reduced spacing on calendar menu

components/calendar/CurrentDate.vue

@@ -3,10 +3,15 @@ import { storeToRefs } from "pinia"
 import { computed } from "vue"
 
 import { PhMapPin } from "@phosphor-icons/vue"
+import { breakpointsTailwind } from "@vueuse/core"
 
 const { defaultDate, getFormattedDateTitle, getRelativeString, getDifferenceInDays } = useCalendar()
 const { selectedDate } = storeToRefs(useCalendar())
 
+const breakpoints = useBreakpoints(
+  breakpointsTailwind
+)
+
 const mainDateTitle = computed(() => getFormattedDateTitle(selectedDate.value, true))
 // const mainDateTitle = computed(() => convertDateToDays(selectedDate.value))
 
@@ -16,12 +21,17 @@ const isToday = computed(() => getDifferenceInDays(defaultDate, selectedDate.val
 
 <template>
   <ClientOnly>
-    <div class="flex gap-2 items-center">
-      <h1 class="text-2xl font-bold flex items-center gap-1">
-        <PhMapPin size="26" weight="bold" /> {{ mainDateTitle }}
+    <div class="grid md:flex md:gap-2 items-center">
+      <h1 class="text-lg md:text-2xl max-md:leading-tight font-bold flex items-center gap-1">
+        <PhMapPin
+          :size="breakpoints.md.value ? 26 : 18"
+          class="max-md:hidden"
+          weight="light"
+        />
+        {{ mainDateTitle }}
       </h1>
-      <h2 v-if="!isToday" class="text-xl italic opacity-75">
-        – {{ dateDifference }}
+      <h2 v-if="!isToday" class="text-sm max-md:leading-tight md:text-xl italic opacity-75">
+      <span class="max-md:hidden">–</span> {{ dateDifference }}
       </h2>
     </div>
 

components/calendar/menu/Menu.vue

@@ -13,9 +13,9 @@ const breakpoints = useBreakpoints(
 </script>
 
 <template>
-  <header class="mt-2 grid gap-4 border-border border-b-[1px]">
-    <div class="px-8 flex items-center justify-between gap-2">
-      <menu class="flex items-center gap-2">
+  <header class="mt-2 grid gap-3 md:gap-4 border-border border-b-[1px]">
+    <div class="px-4 md:px-8 flex items-center justify-between gap-2">
+      <menu class="flex items-center md:gap-2">
         <li>
           <LazyCalendarDialogQuickCreateEvent v-if="!isReadOnly" />
         </li>
@@ -50,7 +50,7 @@ const breakpoints = useBreakpoints(
       </menu>
     </div>
 
-    <div class="ml-8">
+    <div class="ml-4 md:ml-8">
       <CalendarMenuSubnav />
     </div>
   </header>

pages/my/calendars/[id].vue

@@ -60,8 +60,8 @@ watch([calendar], () => {
       <Title>{{ calendar.data.name }}</Title>
     </Head>
 
-    <div class="h-full grid grid-rows-[auto_1fr] pt-8 gap-y-2">
-      <div class="px-8">
+    <div class="h-full grid grid-rows-[auto_1fr] pt-8 gap-y-1 md:gap-y-2">
+      <div class="px-5 md:px-8">
         <Breadcrumb
           v-if="calendar.data.world"
           :items="[