From 9e47c7cb282ec5d28a09ddbf011a2700c9457028 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 4 Jul 2022 11:41:59 +0200
Subject: [PATCH] #152 - updated vacation limits

---
 resources/js/Pages/VacationLimits.vue | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/resources/js/Pages/VacationLimits.vue b/resources/js/Pages/VacationLimits.vue
index 38b7315..02cfca1 100644
--- a/resources/js/Pages/VacationLimits.vue
+++ b/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">
-                  <div class="flex">
+                <td class="p-4 text-sm text-gray-500 whitespace-nowrap bg-white sticky -left-1 z-10">
+                  <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">
-                        {{ item.user.name }}
+                      <p class="flex items-start flex-col-reverse md:flex-row">
+                        <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>