From a272c7a2de193a6afdf93f316dc2be7e4d99b712 Mon Sep 17 00:00:00 2001
From: Kamil Niemczycki <contact@kamilcraft.com>
Date: Mon, 20 Jun 2022 10:57:28 +0200
Subject: [PATCH] MonthlyUsage update #tab

---
 resources/js/Pages/MonthlyUsage.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/resources/js/Pages/MonthlyUsage.vue b/resources/js/Pages/MonthlyUsage.vue
index 0db17f2..fb8c50a 100644
--- a/resources/js/Pages/MonthlyUsage.vue
+++ b/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="text-sm font-medium text-gray-900 whitespace-nowrap"
+                  <div class="ml-3 flex items-start flex-col-reverse md:flex-row">
+                    <span
+                      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 }}
-                    </div>
+                      {{ split }}
+                    </span>
                   </div>
                 </div>
               </th>