Improve table scrolling and add custom scrollbar styling

Introduce custom CSS for improved table scrolling and integrate it into various data-displaying components.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: d43bd811-9372-45a7-8ac9-4a954c0538e1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/d43bd811-9372-45a7-8ac9-4a954c0538e1/YCOwJ60

client/src/components/ui/table.tsx

@@ -6,7 +6,7 @@ const Table = forwardRef<
   HTMLTableElement,
   React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  <div className="relative w-full">
     <table
       ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}

client/src/index.css

@@ -74,6 +74,40 @@
     background-color: var(--primary);
   }
   
+  /* Optimisation des ascenseurs pour les tableaux */
+  .table-container {
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: hsl(20, 5.9%, 80%) transparent;
+  }
+  
+  .table-container::-webkit-scrollbar {
+    height: 6px;
+  }
+  
+  .table-container::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  
+  .table-container::-webkit-scrollbar-thumb {
+    background: hsl(20, 5.9%, 80%);
+    border-radius: 3px;
+  }
+  
+  .table-container::-webkit-scrollbar-thumb:hover {
+    background: hsl(20, 5.9%, 70%);
+  }
+  
+  /* Masquer l'ascenseur horizontal sauf si nécessaire */
+  .no-scrollbar {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+  }
+  
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+  
   .bg-secondary {
     background-color: var(--secondary);
   }

client/src/pages/BLReconciliation.tsx

@@ -626,7 +626,7 @@ export default function BLReconciliation() {
                   />
                 </div>
                 
-                <div className="overflow-x-auto">
+                <div className="table-container">
                   <table className="w-full min-w-[900px]">
                     <thead className="bg-gray-50 border-b border-gray-200">
                       <tr>
@@ -937,7 +937,7 @@ export default function BLReconciliation() {
                   />
                 </div>
                 
-                <div className="overflow-x-auto">
+                <div className="table-container">
                   <table className="w-full min-w-[700px]">
                     <thead className="bg-gray-50 border-b border-gray-200">
                       <tr>

client/src/pages/BLReconciliationNative.tsx

@@ -437,7 +437,7 @@ export default function BLReconciliation() {
                 itemsPerPage={itemsPerPage}
               />
               
-              <div className="overflow-x-auto">
+              <div className="table-container">
                 <table className="min-w-full divide-y divide-gray-200">
                   <thead className="bg-gray-50 border-b border-gray-200">
                     <tr>
@@ -628,7 +628,7 @@ export default function BLReconciliation() {
                 itemsPerPage={itemsPerPage}
               />
               
-              <div className="overflow-x-auto">
+              <div className="table-container">
                 <table className="min-w-full divide-y divide-gray-200">
                   <thead className="bg-gray-50 border-b border-gray-200">
                     <tr>

client/src/pages/Deliveries.tsx

@@ -340,7 +340,7 @@ export default function Deliveries() {
         ) : (
           <div className="flex-1 overflow-y-auto p-6">
             <div className="bg-white border border-gray-200 shadow-lg overflow-hidden">
-              <div className="overflow-x-auto">
+              <div>
                 <table className="w-full">
                   <thead className="bg-gray-50 border-b border-gray-200">
                     <tr>

client/src/pages/DlcPage.tsx

@@ -749,7 +749,7 @@ export default function DlcPage() {
                 Aucun produit DLC trouvé
               </div>
             ) : (
-              <div className="overflow-x-auto">
+              <div>
                 <Table>
                   <TableHeader>
                     <TableRow>

client/src/pages/Orders.tsx

@@ -309,7 +309,7 @@ export default function Orders() {
         ) : (
           <div className="flex-1 overflow-y-auto">
             <div className="bg-white border border-gray-200 shadow-lg overflow-hidden">
-              <div className="overflow-x-auto">
+              <div>
                 <table className="w-full min-w-[700px]">
                   <thead className="bg-gray-50 border-b border-gray-200">
                     <tr>

client/src/pages/Publicities.tsx

@@ -654,7 +654,7 @@ export default function Publicities() {
       ) : (
         <Card>
           <CardContent className="p-0">
-            <div className="overflow-x-auto">
+            <div>
               <table className="w-full">
                 <thead className="bg-gray-50 border-b">
                   <tr>

client/src/pages/SavTickets.tsx

@@ -678,7 +678,7 @@ export default function SavTickets() {
               <p className="text-gray-500">Aucun ticket trouvé</p>
             </div>
           ) : (
-            <div className="overflow-x-auto">
+            <div>
               <table className="w-full">
                 <thead className="bg-gray-50 border-b">
                   <tr>

client/src/pages/Users.tsx

@@ -656,7 +656,7 @@ export default function UsersPage() {
         ) : (
           <div className="p-6">
             <div className="bg-white border border-gray-200 shadow-lg overflow-hidden">
-              <div className="overflow-x-auto">
+              <div>
                 <table className="w-full">
                   <thead className="bg-gray-50 border-b border-gray-200">
                     <tr>