- fixed overflow

resources/js/Pages/Holidays/Index.vue

@@ -17,7 +17,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Keys.vue

@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/MonthlyUsage.vue

@@ -9,7 +9,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-x-auto xl:overflow-x-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Resumes/Index.vue

@@ -15,7 +15,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Technologies.vue

@@ -18,7 +18,7 @@
       </div>
     </div>
     <div class="border-t border-gray-200">
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/Users/Index.vue

@@ -30,7 +30,7 @@
           >
         </div>
       </div>
-      <div class="overflow-auto xl:overflow-visible">
+      <div class="overflow-x-auto">
         <table class="min-w-full divide-y divide-gray-200">
           <thead class="bg-gray-50">
             <tr>

resources/js/Pages/VacationLimits.vue

@@ -10,13 +10,13 @@
     </div>
     <div class="border-t border-gray-200">
       <form @submit.prevent="submitVacationDays">
-        <div class="overflow-auto xl:overflow-visible">
+        <div class="overflow-x-auto">
           <table class="min-w-full border-b divide-y divide-gray-200">
             <thead class="bg-gray-50">
               <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>

resources/js/Pages/VacationRequest/Index.vue

@@ -88,7 +88,7 @@
         </Listbox>
       </div>
     </div>
-    <div class="overflow-auto xl:overflow-visible">
+    <div class="overflow-x-auto">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>

resources/js/Pages/VacationRequest/IndexForApprovers.vue

@@ -53,7 +53,7 @@
               leave-to-class="opacity-0"
             >
               <ListboxOptions
-                class="overflow-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
+                class="overflow-x-auto absolute z-10 py-1 mt-1 w-full max-w-lg max-h-60 text-base bg-white rounded-md focus:outline-none ring-1 ring-black ring-opacity-5 shadow-lg sm:text-sm"
               >
                 <ListboxOption
                   v-slot="{ active }"
@@ -237,7 +237,7 @@
         </Listbox>
       </div>
     </div>
-    <div class="overflow-auto xl:overflow-visible">
+    <div class="overflow-x-auto">
       <table class="min-w-full divide-y divide-gray-200">
         <thead class="bg-gray-50">
           <tr>