Merge branch 'code/cleanup' into dev

components/calendar/state/monthly/DayTile.vue

@@ -73,7 +73,7 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
 <template>
   <div
     ref="calendarTile"
-    class="tile relative text-xs p-2 border-slate-200 contrast-more:border-slate-500 dark:border-slate-700 dark:bg-black transition-colors"
+    class="tile relative text-xs p-2"
     :class="{
       'text-slate-300 dark:text-slate-500': props.faded,
       'text-slate-500 dark:text-slate-300': !props.faded
@@ -149,14 +149,11 @@ const eventsNotDisplayed: ComputedRef<number>  = computed<number>(() => eventsFo
 </template>
 
 <style lang="scss" scoped>
+// .tile are the direct children of the grid
+// We need to get, between each element, a 1px solid line to separate them, for columns and rows
 .tile {
-  &:not(:nth-child(10n)) {
+  border-right-width: 1px;
-    border-right-width: 1px;
+  border-bottom-width: 1px;
-  }
-
-  &:nth-child(n + 11) {
-    border-top-width: 1px;
-  }
 }
 
 .event-enter-active {

components/global/AddCard.vue

@@ -6,7 +6,7 @@ const emit = defineEmits(["on-click"])
 
 <template>
   <UiCard
-    class="h-full md:w-fit transition-all bg-transparent hover:text-slate-900 text-slate-500 dark:hover:text-slate-100 dark:text-slate-500 dark:focus-within:outline-gray-900 hover:-translate-y-0"
+    class="h-full lg:w-fit transition-all bg-transparent hover:text-slate-900 text-slate-500 dark:hover:text-slate-100 dark:text-slate-500 dark:focus-within:outline-gray-900 hover:-translate-y-0"
     has-click
     @on-click="emit('on-click')"
   >

pages/my/index.vue

@@ -135,11 +135,11 @@ function hideEditModal() {
           </Heading>
         </div>
 
-        <ul v-if="worlds?.data" class="grid lg:grid-cols-3 gap-2">
+        <ul v-if="worlds?.data" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
           <li v-for="world in sortedWorlds" :key="world.id">
             <WorldPreviewCard :world="world" @on-edit="() => deployEditModal(world)" @on-delete="() => deployDeleteModal(world)" />
           </li>
-          <li class="md:w-fit">
+          <li class="xl:w-fit">
             <AddCard @on-click="() => isCreateWorldModalOpen = true">
               <template v-if="worlds?.data?.length > 0">
                 {{ $t('entity.world.addSingle') }}

pages/my/worlds/[id].vue

@@ -227,7 +227,7 @@ function hideEditModal() {
             </Heading>
           </div>
 
-          <ul class="grid md:grid-cols-3 gap-2">
+          <ul class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
             <li v-for="calendar in sortedCalendars" :key="calendar.id">
               <CalendarPreviewCard
                 :calendar="calendar"
@@ -237,7 +237,7 @@ function hideEditModal() {
                 @on-delete="() => deployDeleteCalendarModal(calendar)" />
             </li>
 
-            <li class="md:w-fit">
+            <li class="xl:w-fit">
               <AddCard @on-click="() => isCreateCalendarModalOpen = true">
                 <template v-if="sortedCalendars.length > 0">
                   {{ $t('entity.calendar.addSingle') }}