#152 - change layout

#173 - improved button behaviour

app/Eloquent/Models/Resume.php

@@ -31,6 +31,7 @@ class Resume extends Model
         "technologies" => AsCollection::class,
         "projects" => AsCollection::class,
     ];
+    protected $perPage = 50;
 
     public function user(): BelongsTo
     {

app/Eloquent/Models/User.php

@@ -46,6 +46,7 @@ class User extends Authenticatable implements NotifiableInterface
     protected $with = [
         "profile",
     ];
+    protected $perPage = 50;
 
     public function profile(): HasOne
     {

app/Eloquent/Models/VacationRequest.php

@@ -49,6 +49,7 @@ class VacationRequest extends Model
         "to" => "date",
         "event_ids" => AsCollection::class,
     ];
+    protected $perPage = 50;
 
     public function user(): BelongsTo
     {

resources/js/Pages/Calendar.vue

@@ -55,18 +55,20 @@
       </div>
     </div>
     <div class="overflow-x-auto">
-      <table class="w-full text-sm text-center border border-gray-300">
+      <table class="w-full text-sm text-center border-y border-r border-gray-300">
         <thead>
           <tr>
-            <th class="py-2 w-64 text-lg font-semibold text-gray-800 border border-gray-300">
+            <th
+              class="py-2 w-64 text-lg font-semibold text-gray-800 border-y border-gray-300 bg-white sticky left-0 sticky-border"
+            >
               <div class="flex justify-center items-center">
-                {{ selectedMonth.name }} {{ years.selected.year }}
+                {{ selectedMonth.name }}
               </div>
             </th>
             <th
               v-for="day in calendar"
               :key="day.dayOfMonth"
-              class="p-2 text-lg font-semibold text-gray-900 border border-gray-300"
+              class="p-2 text-lg font-semibold text-gray-900 border second:border-l-0 border-gray-300"
               style="min-width: 46px;"
               :class="{ 'bg-red-100 text-red-800': day.isWeekend || day.isHoliday, 'text-blumilk-600 bg-blumilk-25': day.isToday }"
             >
@@ -84,22 +86,28 @@
             v-for="user in users.data"
             :key="user.id"
           >
-            <th class="p-2 border border-gray-300">
+            <th
+              class="p-2 border-y border-gray-300 bg-white sticky left-0 sticky-border"
+            >
               <div class="flex justify-start items-center">
                 <span class="inline-flex justify-center items-center w-8 h-8 rounded-full">
                   <img :src="user.avatar">
                 </span>
-                <div class="ml-3">
+                <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
-                  <div class="text-sm font-medium text-gray-900 truncate">
+                  <span
-                    {{ user.name }}
+                    v-for="split in user.name.split(' ', 2)"
-                  </div>
+                    :key="split"
+                    class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
+                  >
+                    {{ split }}
+                  </span>
                 </div>
               </div>
             </th>
             <td
               v-for="day in calendar"
               :key="day.dayOfMonth"
-              class="border border-gray-300"
+              class="border second:border-l-0 border-gray-300"
               :class="{ 'bg-blumilk-25': day.isToday, 'bg-red-100': day.isWeekend || day.isHoliday }"
               @mouseover="setActiveDay(user.id + '+' + day.date)"
               @mouseleave="unsetActiveDay"
@@ -176,3 +184,10 @@ function linkParameters(user, day) {
   return props.can.createOnBehalfOfEmployee ? { user: user.id, from_date: day.date } : { from_date: day.date }
 }
 </script>
+
+<style lang="css">
+.sticky-border {
+  box-shadow: inset -1px 0 rgb(209 213 219 / 1),
+              inset 1px 0 rgb(209 213 219 / 1);
+}
+</style>

resources/js/Pages/Dashboard.vue

@@ -8,9 +8,6 @@
         :approved-vacations="approvedVacations"
         :pending-vacations="pendingVacations"
       />
-      <VacationStats :stats="stats" />
-    </div>
-    <div class="grid grid-cols-1 gap-4">
       <PendingVacationRequests
         v-if="can.listAllVacationRequests"
         :requests="vacationRequests.data"
@@ -19,6 +16,9 @@
         v-else
         :requests="vacationRequests.data"
       />
+    </div>
+    <div class="grid grid-cols-1 gap-4">
+      <VacationStats :stats="stats" />
       <AbsenceList
         v-if="years.current.year === years.selected.year && absences.data.length"
         :absences="absences.data"

resources/js/Pages/MonthlyUsage.vue

@@ -9,11 +9,11 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-x-auto overflow-y-hidden xl:overflow-x-visible">
+      <div class="overflow-x-auto xl:overflow-x-visible">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>
-              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase">
+              <th class="py-3 px-6 w-64 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase bg-gray-50 sticky -left-1">
                 Pracownik
               </th>
               <th
@@ -38,7 +38,7 @@
               :key="item.user.id"
               class="hover:bg-blumilk-25"
             >
-              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap">
+              <th class="p-4 text-sm font-semibold text-gray-500 capitalize whitespace-nowrap bg-white sticky -left-1">
                 <div class="flex justify-start items-center">
                   <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                     <img
@@ -46,12 +46,14 @@
                       :src="item.user.avatar"
                     >
                   </span>
-                  <div class="ml-3">
+                  <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
-                    <div
+                    <span
-                      class="text-sm font-medium text-gray-900 whitespace-nowrap"
+                      v-for="split in item.user.name.split(' ', 2)"
+                      :key="split"
+                      class="text-sm first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
                     >
-                      {{ item.user.name }}
+                      {{ split }}
-                    </div>
+                    </span>
                   </div>
                 </div>
               </th>

resources/js/Pages/VacationLimits.vue

@@ -16,7 +16,7 @@
               <tr>
                 <th
                   scope="col"
-                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
+                  class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap bg-gray-50 sticky -left-1"
                 >
                   Imię i nazwisko
                 </th>
@@ -52,8 +52,8 @@
                 :key="item.id"
                 class="hover:bg-blumilk-25"
               >
-                <td class="p-4 text-sm text-gray-500 whitespace-nowrap">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap bg-white sticky -left-1 z-10">
-                  <div class="flex">
+                  <div class="flex justify-start items-center">
                     <span class="inline-flex justify-center items-center w-10 h-10 rounded-full">
                       <img
                         class="w-10 h-10 rounded-full"
@@ -61,10 +61,16 @@
                       >
                     </span>
                     <div class="ml-3">
-                      <p class="text-sm font-medium text-gray-900 break-all">
+                      <p class="flex items-start flex-col-reverse md:flex-row">
-                        {{ item.user.name }}
+                        <span
+                          v-for="split in item.user.name.split(' ', 2)"
+                          :key="split"
+                          class="first:text-xs md:first:text-sm font-medium text-gray-900 truncate first:mr-1"
+                        >
+                          {{ split }}
+                        </span>
                       </p>
-                      <p class="text-sm text-gray-500 break-all">
+                      <p class="hidden md:block text-sm text-gray-500 break-all">
                         {{ item.user.email }}
                       </p>
                     </div>

resources/js/Pages/VacationRequest/Create.vue

@@ -297,8 +297,8 @@
               <button
                 type="submit"
                 class="inline-flex justify-center py-2 px-4 text-sm font-medium text-white bg-blumilk-600 rounded-md border border-transparent focus:outline-none focus:ring-2 focus:ring-blumilk-500 focus:ring-offset-2 shadow-sm"
-                :class="[form.processing || !form.isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
+                :class="[form.processing || !isDirty ? 'disabled:opacity-60' : 'hover:bg-blumilk-700']"
-                :disabled="form.processing || !form.isDirty"
+                :disabled="form.processing || !isDirty"
               >
                 Zapisz
               </button>
@@ -359,6 +359,13 @@ const form = useForm({
   flowSkipped: false,
 })
 
+let isDirty = ref(false)
+
+watch(form, formData => {
+  const { from, to } = formData.data()
+  isDirty.value = formData.isDirty || from !== null || to !== null
+}, { immediate: true, deep: true })
+
 refreshEstimatedDays(form.from, form.to)
 
 const estimatedDays = ref([])

resources/js/Pages/VacationRequest/IndexForApprovers.vue

@@ -242,46 +242,12 @@
         <thead class="bg-gray-50">
           <tr>
             <th
+              v-for="head in headers"
+              :key="head"
               scope="col"
               class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
             >
-              Numer
+              {{ head }}
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Pracownik
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Rodzaj wniosku
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Od
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Do
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Dni urlopu
-            </th>
-            <th
-              scope="col"
-              class="py-3 px-4 text-xs font-semibold tracking-wider text-left text-gray-500 uppercase whitespace-nowrap"
-            >
-              Status
             </th>
             <th scope="col" />
           </tr>
@@ -381,6 +347,8 @@ const props = defineProps({
   types: Object,
 })
 
+const headers = ['Numer', 'Pracownik', 'Rodzaj wniosku', 'Od', 'Do', 'Dni urlopu', 'Status']
+
 const statuses = [
   {
     name: 'Wszystkie',

resources/js/Shared/Widgets/Calendar/DayComponent.vue

@@ -1,21 +1,6 @@
 <template>
   <div
-    class="box-border"
+    :class="[ (day.isVacation || day.isPendingVacation) && `border-b-2 border-dashed ${getVacationBorder(day)}` ]"
-    :class="[
-      day.isCurrentMonth ? {
-        'bg-red-100': day.isWeekend,
-        'bg-white hover:bg-blumilk-25': !day.isWeekend && !day.isHoliday,
-        'bg-red-100 text-red-800': day.isHoliday || day.isWeekend
-      } : [
-        'bg-gray-50 text-gray-500',
-        {
-          'bg-red-50': day.isWeekend
-        }
-      ],
-      day.isHoliday && 'font-bold cursor-default',
-      (day.isPendingVacation) && `border-b-4 border-dashed ${day.getVacationType.border}`,
-      (day.isVacation) && `border-b-4 ${day.getVacationType.border}`
-    ]"
   >
     <Popper
       v-if="day.isHoliday"
@@ -25,6 +10,27 @@
       offset-distance="0"
       @mouseover.passive="onMouseover"
       @mouseleave="onMouseleave"
+    >
+      <time
+        :datetime="day.date"
+        :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white', 'text-red-600' ]"
+      >
+        {{ day.dayNumber }}
+      </time>
+      <template #content>
+        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
+          {{ getHolidayDescription(day) }}
+        </div>
+      </template>
+    </Popper>
+    <Popper
+      v-else-if="day.isPendingVacation"
+      as="div"
+      open-delay="200"
+      hover
+      offset-distance="0"
+      @mouseover.passive="onMouseover"
+      @mouseleave="onMouseleave"
     >
       <time
         :datetime="day.date"
@@ -33,44 +39,14 @@
         {{ day.dayNumber }}
       </time>
       <template #content>
-        <div class="py-2 px-6 text-sm font-semibold text-left text-gray-700 bg-white rounded-lg border border-gray-400">
+        <VacationPopup :vacation="getVacationInfo(day)" />
-          {{ day.getHolidayInfo }}
-        </div>
-      </template>
-    </Popper>
-    <Popper
-      v-else-if="day.isVacation || day.isPendingVacation"
-      as="div"
-      open-delay="200"
-      hover
-      offset-distance="0"
-      @mouseover.passive="onMouseover"
-      @mouseleave="onMouseleave"
-    >
-      <div class="flex justify-between">
-        <time
-          :datetime="day.date"
-          :class="[ day.isToday && 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white' ]"
-        >
-          {{ day.dayNumber }}
-        </time>
-        <div class="hidden md:inline-block">
-          <VacationIcon
-            :type="day.getVacationType.value"
-          />
-        </div>
-      </div>
-      <template #content>
-        <VacationPopup :vacation="day.getVacationInfo" />
       </template>
     </Popper>
     <div
       v-else-if="day.isWeekend"
-      class="text-red-800"
     >
       <time
         :datetime="day.date"
-        class="cursor-default"
         :class="{ 'flex h-6 w-6 items-center justify-center rounded-full bg-blumilk-500 font-semibold text-white': day.isToday }"
       >
         {{ day.dayNumber }}
@@ -97,13 +73,21 @@
 import Popper from 'vue3-popper'
 import { defineProps, ref } from 'vue'
 import VacationPopup from '@/Shared/VacationPopup'
-import VacationIcon from '@/Shared/VacationTypeCalendarIcon'
 
 defineProps({
   day: {
     type: Object,
     required: true,
   },
+  getHolidayDescription: {
+    type: Function,
+  },
+  getVacationBorder: {
+    type: Function,
+  },
+  getVacationInfo: {
+    type: Function,
+  },
 })
 
 const isActive = ref(false)

resources/js/Shared/Widgets/VacationCalendar.vue

@@ -7,10 +7,10 @@
       <div class="flex justify-center">
         <div class="flex items-center rounded-md shadow-sm md:items-stretch">
           <button
+            v-if="calendarState.isPrevious"
             type="button"
-            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 py-2 pl-3 pr-4 text-gray-400 focus:relative md:w-9 md:px-2"
+            class="flex items-center justify-center rounded-l-md border border-r-0 border-gray-300 bg-white py-2 pl-3 pr-4 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
-            :class="[ calendarState.isPrevious ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
+            @click="toLast"
-            @click="toPrevious"
           >
             <span class="sr-only">Poprzedni {{ calendarState.viewMode.details.shortcut }}</span>
             <ChevronLeftIcon
@@ -21,18 +21,16 @@
           <button
             type="button"
             class="hidden border-t border-b border-gray-300 bg-white px-3.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:text-gray-900 focus:relative md:block"
+            :class="{ 'rounded-l-md border border-r-0': !calendarState.isPrevious, 'rounded-r-md border border-l-0': !calendarState.isNext }"
             @click="goToToday"
           >
-            Dzisiaj
+            Dziś
           </button>
-          <span
+          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden" />
-            class="relative -mx-px h-5 w-px bg-gray-300 md:hidden z-10"
-          />
           <button
+            v-if="calendarState.isNext"
             type="button"
-            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 py-2 pl-4 pr-3 text-gray-400 focus:relative md:w-9 md:px-2"
+            class="flex items-center justify-center rounded-r-md border border-l-0 border-gray-300 bg-white py-2 pl-4 pr-3 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:px-2 md:hover:bg-gray-50"
-            :class="[ calendarState.isNext ? 'bg-white hover:text-gray-500 md:hover:bg-gray-50' : 'bg-gray-100' ]"
-            :disabled="!calendarState.isNext"
             @click="toNext"
           >
             <span class="sr-only">Następny {{ calendarState.viewMode.details.shortcut }}</span>
@@ -51,8 +49,7 @@
           type="button"
           class="flex items-center rounded-md border border-gray-300 bg-white py-2 pl-3 pr-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50"
         >
-          <span class="md:hidden">{{ calendarState.viewMode.details.shortcut }}</span>
+          {{ calendarState.viewMode.details.name }}
-          <span class="hidden md:inline-block">{{ calendarState.viewMode.details.name }}</span>
           <ChevronDownIcon
             class="ml-2 h-5 w-5 text-gray-400"
             aria-hidden="true"
@@ -96,25 +93,25 @@
         v-if="calendarState.viewMode.isMonth"
         class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs font-semibold leading-6 text-gray-700 lg:flex-none"
       >
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Pn
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Wt
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Śr
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Cz
         </div>
-        <div class="py-2 bg-white">
+        <div class="bg-white py-2">
           Pt
         </div>
-        <div class="py-2 bg-red-100 text-red-800">
+        <div class="bg-red-100 py-2">
           Sb
         </div>
-        <div class="py-2 bg-red-100 text-red-800">
+        <div class="bg-red-100 py-2">
           Nd
         </div>
       </div>
@@ -128,7 +125,10 @@
             :key="index"
             :day="day"
             class="flex flex-col relative py-2 px-3"
-            :class="{ 'day': calendarState.viewMode.isWeek }"
+            :class="[day.isCurrentMonth ? 'bg-white' : 'bg-gray-50 text-gray-500', { 'hover:bg-blumilk-25': day.isCurrentMonth && !day.isWeekend }, { 'day': calendarState.viewMode.isWeek }, { 'bg-red-100': day.isCurrentMonth && day.isWeekend }, { 'bg-red-50': !day.isCurrentMonth && day.isWeekend }, { 'text-red-800': day.isWeekend }]"
+            :get-holiday-description="getHolidayDescription"
+            :get-vacation-border="getVacationBorder"
+            :get-vacation-info="getVacationInfo"
           />
         </div>
       </div>
@@ -164,7 +164,6 @@ const currentDate = getCurrentDate()
 const months = useMonthInfo().getMonths()
 const { findType } = useVacationTypeInfo()
 const selectedYear = useCurrentYearPeriodInfo().year.value
-const weeksInYear = DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber
 
 const calendar = {
   viewMode: ref('week'),
@@ -184,7 +183,7 @@ const calendarState = reactive({
   monthName: computed(() => months[calendar.currents.month - 1]?.name),
   isActualYear: computed(() => calendar.currents.year === DateTime.now().year),
   isPrevious: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 1 : calendar.currents.week > 0),
-  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < weeksInYear),
+  isNext: computed(() => calendarState.viewMode.isMonth ? calendar.currents.month !== 12 : calendar.currents.week < DateTime.fromObject({ year: selectedYear, month: 12, day: 31 }).weekNumber),
 })
 
 const customCalendar = {
@@ -231,22 +230,15 @@ const customCalendar = {
   },
   prepareDay(day) {
     const isCurrentMonth = isInCurrentMonth(day)
-    const startDay = {
-      date: day.toISODate(),
-      isVacation: isCurrentMonth && isVacation(day),
-      isPendingVacation: isCurrentMonth && isPendingVacation(day),
-      isHoliday: isHoliday(day),
-    }
-
     return {
-      ...startDay,
+      date: day.toISODate(),
       dayNumber: day.day,
-      isCurrentMonth,
+      isCurrentMonth: isCurrentMonth,
       isToday: isToday(day),
       isWeekend: isWeekend(day),
-      getHolidayInfo: startDay.isHoliday ? getHolidayInfo(startDay) : undefined,
+      isHoliday: isHoliday(day),
-      getVacationType: startDay.isVacation || startDay.isPendingVacation ? getVacationType(startDay) : undefined,
+      isVacation: isCurrentMonth && isVacation(day),
-      getVacationInfo: startDay.isVacation || startDay.isPendingVacation ? getVacationInfo(startDay) : undefined,
+      isPendingVacation: isCurrentMonth && isPendingVacation(day),
     }
   },
 }
@@ -257,22 +249,18 @@ watch([calendar.viewMode, calendar.currents], () => {
 
 customCalendar.loadCalendar()
 
-function toPrevious() {
+function toLast() {
-  if (calendarState.isPrevious) {
+  if (calendar.viewMode.value === 'week')
-    if (calendar.viewMode.value === 'week')
+    minusWeek()
-      minusWeek()
+  else
-    else
+    minusMonth()
-      minusMonth()
-  }
 }
 
 function toNext() {
-  if (calendarState.isNext) {
+  if (calendar.viewMode.value === 'week')
-    if (calendar.viewMode.value === 'week')
+    addWeek()
-      addWeek()
+  else
-    else
+    addMonth()
-      addMonth()
-  }
 }
 
 function resetCalendar(config = {}) {
@@ -354,7 +342,7 @@ function isHoliday(date) {
   return props.holidays[date.toISODate()] !== undefined
 }
 
-function getHolidayInfo(day) {
+function getHolidayDescription(day) {
   return props.holidays[day.date]
 }
 
@@ -366,8 +354,8 @@ function isPendingVacation(date) {
   return props.pendingVacations[date.toISODate()] !== undefined
 }
 
-function getVacationType(day) {
+function getVacationBorder(day) {
-  return findType(getVacationInfo(day).type)
+  return findType(getVacationInfo(day).type)?.border
 }
 
 function getVacationInfo(day) {

resources/js/Shared/Widgets/VacationStats.vue

@@ -1,8 +1,5 @@
 <template>
-  <section class="grid grid-cols-1 gap-4 md:grid-cols-2">
+  <section class="grid grid-cols-1 gap-4 md:grid-cols-1">
-    <div class="hidden p-4 bg-white shadow-md md:block">
-      <VacationChart :stats="stats" />
-    </div>
     <div class="h-full">
       <div class="grid grid-cols-2 gap-4 h-full">
         <div class="py-5 px-4 bg-white shadow-md sm:p-6">
@@ -77,8 +74,6 @@
 </template>
 
 <script setup>
-import VacationChart from '@/Shared/VacationChart'
-
 defineProps({
   stats: Object,
 })

tailwind.config.js

@@ -1,4 +1,5 @@
 const defaultTheme = require('tailwindcss/defaultTheme')
+const plugin = require('tailwindcss/plugin')
 
 module.exports = {
   content: [
@@ -31,5 +32,12 @@ module.exports = {
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
     require('@tailwindcss/line-clamp'),
+    plugin(function({ addVariant, e }) {
+      addVariant('second', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`second${separator}${className}`)}:nth-child(2)`
+        })
+      })
+    }),
   ],
 }

tests/Feature/UserTest.php

@@ -73,10 +73,10 @@ class UserTest extends FeatureTestCase
 
     public function testUserListIsPaginated(): void
     {
-        User::factory()->count(15)->create();
+        User::factory()->count(50)->create();
         $admin = User::factory()->admin()->create();
 
-        $this->assertDatabaseCount("users", 16);
+        $this->assertDatabaseCount("users", 51);
 
         $this->actingAs($admin)
             ->get("/users?page=2")