From da1044bbd41c81867e8f91bd8bee1fc39478f7dd Mon Sep 17 00:00:00 2001
From: admin <aysuser00@gmail.com>
Date: Mon, 1 Jun 2026 16:52:08 +0800
Subject: [PATCH] style(calendar): fix horizontal scroll overlapping by
 changing table to border-separate and enabling sticky position on employee
 column

---
 .../js/pages/hr/attendance-records/calendar.tsx  | 14 +++++++-------
 resources/js/pages/hr/shifts/calendar.tsx        | 16 ++++++++--------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/resources/js/pages/hr/attendance-records/calendar.tsx b/resources/js/pages/hr/attendance-records/calendar.tsx
index 2615ff068..65d0277af 100644
--- a/resources/js/pages/hr/attendance-records/calendar.tsx
+++ b/resources/js/pages/hr/attendance-records/calendar.tsx
@@ -389,24 +389,24 @@ export default function AttendanceCalendar() {
       {/* Matrix Grid */}
       <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm overflow-hidden">
         <div className="overflow-x-auto pb-2">
-          <table className="min-w-max w-full border-collapse text-sm">
+          <table className="min-w-max w-full border-separate border-spacing-0 text-sm">
             <thead>
-              <tr className="bg-gray-50/80 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-800">
-                <th className="p-3 text-left font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider sticky left-0 z-10 bg-gray-50/95 dark:bg-gray-800/95 border-r border-gray-200 dark:border-gray-800 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] backdrop-blur min-w-[280px]">
+              <tr className="bg-gray-50/80 dark:bg-gray-800/80">
+                <th className="p-3 text-left font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider sticky left-0 z-10 bg-gray-50/95 dark:bg-gray-800/95 border-r border-b border-gray-200 dark:border-gray-800 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] backdrop-blur min-w-[280px]">
                   {t('Employee')}
                 </th>
                 {dates?.map((d: any, idx: number) => (
-                  <th key={idx} className="p-2 border-r border-gray-200 dark:border-gray-800 min-w-[50px] text-center last:border-r-0">
+                  <th key={idx} className="p-2 border-r border-b border-gray-200 dark:border-gray-800 min-w-[50px] text-center last:border-r-0">
                     <div className="font-bold text-gray-800 dark:text-gray-200 text-base">{d.day}</div>
                     <div className="text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-widest">{d.day_name}</div>
                   </th>
                 ))}
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+            <tbody>
               {users?.length > 0 ? users.map((user: any) => (
                 <tr key={user.id} className="hover:bg-gray-50/50 dark:hover:bg-gray-800/50 transition-colors">
-                  <td className="p-3 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 sticky left-0 z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.05)]">
+                  <td className="p-3 bg-white dark:bg-gray-900 border-r border-b border-gray-200 dark:border-gray-800 sticky left-0 z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.05)]">
                     <div className="flex items-center gap-3">
                       <div className="flex-shrink-0 w-10 h-10 rounded-full bg-amber-100 dark:bg-amber-900/50 flex items-center justify-center text-amber-700 dark:text-amber-300 font-bold border border-amber-200 dark:border-amber-800">
                         {user.name.split(' ').map((n: string) => n[0]).join('').substring(0, 2).toUpperCase()}
@@ -426,7 +426,7 @@ export default function AttendanceCalendar() {
                   {dates?.map((d: any, idx: number) => {
                     const cellData = user.records[d.date];
                     return (
-                      <td key={idx} className="p-2 border-r border-gray-50 dark:border-gray-800 last:border-r-0 text-center">
+                      <td key={idx} className="p-2 border-r border-b border-gray-100 dark:border-gray-800 last:border-r-0 text-center">
                         <div 
                            className={`inline-flex items-center justify-center w-8 h-8 rounded-lg text-[10px] font-bold transition-all shadow-sm ${getStatusColor(cellData.status)} ${canEdit ? 'cursor-pointer hover:scale-110 active:scale-95' : ''} ${cellData.record?.is_approved_leave ? 'ring-2 ring-indigo-400 ring-offset-1' : ''}`}
                           title={cellData.label}
diff --git a/resources/js/pages/hr/shifts/calendar.tsx b/resources/js/pages/hr/shifts/calendar.tsx
index ec3a99e10..d2719d8f3 100644
--- a/resources/js/pages/hr/shifts/calendar.tsx
+++ b/resources/js/pages/hr/shifts/calendar.tsx
@@ -225,26 +225,26 @@ export default function ShiftCalendar() {
       {/* Matrix Grid */}
       <div className="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg shadow-sm overflow-hidden">
         <div className="overflow-x-auto pb-2">
-          <table className="min-w-max w-full border-collapse text-sm">
+          <table className="min-w-max w-full border-separate border-spacing-0 text-sm">
             <thead>
-              <tr className="bg-gray-50/80 dark:bg-gray-800/80 border-b border-gray-200 dark:border-gray-800">
-                <th className="p-3 text-left font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider sticky left-0 z-10 bg-gray-50/95 dark:bg-gray-800/95 border-r border-gray-200 dark:border-gray-800 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] backdrop-blur min-w-[280px]">
+              <tr className="bg-gray-50/80 dark:bg-gray-800/80">
+                <th className="p-3 text-left font-bold text-gray-700 dark:text-gray-300 uppercase tracking-wider sticky left-0 z-10 bg-gray-50/95 dark:bg-gray-800/95 border-r border-b border-gray-200 dark:border-gray-800 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)] backdrop-blur min-w-[280px]">
                   {t('Employee')}
                 </th>
                 {dates?.map((d: any, idx: number) => (
-                  <th key={idx} className="p-2 border-r border-gray-200 dark:border-gray-800 min-w-[50px] text-center last:border-r-0">
+                  <th key={idx} className="p-2 border-r border-b border-gray-200 dark:border-gray-800 min-w-[50px] text-center last:border-r-0">
                     <div className="font-bold text-gray-800 dark:text-gray-200 text-base">{d.day}</div>
                     <div className="text-[10px] text-gray-500 dark:text-gray-400 uppercase tracking-widest">{d.day_name}</div>
                   </th>
                 ))}
               </tr>
             </thead>
-            <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
+            <tbody>
               {users?.length > 0 ? users.map((user: any) => (
                 <tr key={user.id} className="hover:bg-gray-50/50 dark:hover:bg-gray-800/50 transition-colors">
-                  <td className="p-3 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 sticky left-0 z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.05)]">
+                  <td className="p-3 bg-white dark:bg-gray-900 border-r border-b border-gray-200 dark:border-gray-800 sticky left-0 z-10 shadow-[2px_0_5px_-2px_rgba(0,0,0,0.05)]">
                     <div className="flex items-center gap-3">
-                      <div className="flex-shrink-0h w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center text-indigo-700 dark:text-indigo-300 font-bold border border-indigo-200 dark:border-indigo-800">
+                      <div className="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-100 dark:bg-indigo-900/50 flex items-center justify-center text-indigo-700 dark:text-indigo-300 font-bold border border-indigo-200 dark:border-indigo-800">
                         {user.name.split(' ').map((n: string) => n[0]).join('').substring(0, 2).toUpperCase()}
                       </div>
                       <div>
@@ -270,7 +270,7 @@ export default function ShiftCalendar() {
                       : '';
 
                     return (
-                      <td key={idx} className="p-1 border-r border-gray-50 dark:border-gray-800 last:border-r-0 text-center min-w-[70px]">
+                      <td key={idx} className="p-1 border-r border-b border-gray-100 dark:border-gray-800 last:border-r-0 text-center min-w-[70px]">
                         <div 
                           className={`flex flex-col items-center justify-center py-1 px-1.5 rounded border text-[11px] font-extrabold transition-all shadow-sm h-[50px] w-full ${bgClass} ${canEdit ? 'cursor-pointer hover:brightness-95 active:scale-95' : ''}`}
                           onClick={() => handleCellClick(user, d.date, cellData)}