updated expense skeleton according expense list

src/components/Expenses/ExpenseSkeleton.jsx

@@ -137,16 +137,14 @@ const SkeletonCell = ({ width = "100%", height = 20, className = "", style = {}
 
 export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
   return (
-    <table
+  <div className="card px-2">
+      <table
       className="card-body table border-top dataTable no-footer dtr-column text-nowrap"
       aria-describedby="DataTables_Table_0_info"
       id="horizontal-example"
     >
       <thead>
         <tr>
-          <th colSpan={2}>
-            <div className="text-start ms-6">Date Time</div>
-          </th>
           <th className="d-none d-sm-table-cell">
             <div className="text-start ms-5">Expense Type</div>
           </th>
@@ -173,13 +171,6 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
             {/* Rows under this group */}
             {[...Array(rowsPerGroup)].map((__, rowIdx) => (
               <tr key={`row-${groupIdx}-${rowIdx}`} className={rowIdx % 2 === 0 ? "odd" : "even"}>
-                {/* Date Time colSpan=2 */}
-                <td colSpan={2} className="sorting_1">
-                  <div className="d-flex justify-content-start align-items-center user-name ms-6">
-                    <SkeletonCell width="120px" height={18} />
-                  </div>
-                </td>
-
                 {/* Expense Type */}
                 <td className="text-start d-none d-sm-table-cell ms-5">
                   <SkeletonCell width="90px" height={16} />
@@ -228,5 +219,6 @@ export const ExpenseTableSkeleton = ({ groups = 3, rowsPerGroup = 3 }) => {
         ))}
       </tbody>
     </table>
+  </div>
   );
 };