From 147ae0f4c701f74fc8845e4556bde08bb62dcd36 Mon Sep 17 00:00:00 2001
From: SylvainP1 <5533467-SylvainP1@users.noreply.replit.com>
Date: Tue, 14 Apr 2026 08:34:21 +0000
Subject: [PATCH] Make the timesheet grid more compact and fully visible

Adjust table layout and styling in `timesheet-detail.tsx` to ensure all daily columns are visible without horizontal scrolling, by reducing column width and font sizes.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 55837015-10e9-4be9-b857-7f5e6be73772
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 0bd07880-9d2c-48df-86e1-9d0c827ee4a5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1cc377db-7ea0-49f2-97ce-c3e87e0228cc/55837015-10e9-4be9-b857-7f5e6be73772/NknTeZP
Replit-Helium-Checkpoint-Created: true
---
 .../cra-app/src/pages/timesheet-detail.tsx    | 63 ++++++++++---------
 1 file changed, 33 insertions(+), 30 deletions(-)

diff --git a/artifacts/cra-app/src/pages/timesheet-detail.tsx b/artifacts/cra-app/src/pages/timesheet-detail.tsx
index 7707c08..3535433 100644
--- a/artifacts/cra-app/src/pages/timesheet-detail.tsx
+++ b/artifacts/cra-app/src/pages/timesheet-detail.tsx
@@ -289,9 +289,8 @@ export default function TimesheetDetailPage() {
       </div>
 
       <div className="bg-card rounded-xl border shadow-sm flex-1 min-h-0 flex flex-col overflow-hidden">
-        {/* Actions bar */}
         {isEditable && (
-          <div className="p-4 border-b flex justify-between items-center bg-muted/20 shrink-0">
+          <div className="px-3 py-2 border-b flex justify-between items-center bg-muted/20 shrink-0">
             <Button variant="outline" size="sm" onClick={() => setIsAddingLine(true)} className="gap-2">
               <Plus className="h-4 w-4" />
               Ajouter un projet
@@ -302,29 +301,35 @@ export default function TimesheetDetailPage() {
           </div>
         )}
 
-        {/* The Grid */}
-        <div className="flex-1 overflow-auto relative">
-          <table className="w-full text-sm text-left border-collapse min-w-max">
-            <thead className="sticky top-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 text-muted-foreground shadow-sm">
+        <div className="flex-1 overflow-y-auto">
+          <table className="w-full text-xs border-collapse table-fixed">
+            <colgroup>
+              <col className="w-[180px]" />
+              {daysArray.map(day => (
+                <col key={day.dateStr} />
+              ))}
+              <col className="w-[48px]" />
+            </colgroup>
+            <thead className="sticky top-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 text-muted-foreground">
               <tr>
-                <th className="sticky left-0 z-30 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 p-3 font-semibold border-b border-r min-w-[250px] shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]">
+                <th className="sticky left-0 z-30 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 px-2 py-1.5 font-semibold border-b border-r text-left">
                   Projet
                 </th>
                 {daysArray.map(day => (
                   <th 
                     key={day.dateStr} 
                     className={cn(
-                      "p-2 font-medium text-center border-b border-r min-w-[40px]",
+                      "px-0 py-1 font-medium text-center border-b border-r",
                       day.isWeekendDay ? "bg-muted/50" : ""
                     )}
                   >
-                    <div className="flex flex-col items-center">
-                      <span className="text-[10px] uppercase opacity-70">{day.dayName}</span>
-                      <span>{day.dayNum}</span>
+                    <div className="flex flex-col items-center leading-tight">
+                      <span className="text-[9px] uppercase opacity-60">{day.dayName.slice(0, 2)}</span>
+                      <span className="text-[11px]">{day.dayNum}</span>
                     </div>
                   </th>
                 ))}
-                <th className="p-3 font-semibold border-b text-center sticky right-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]">
+                <th className="px-1 py-1.5 font-semibold border-b text-center sticky right-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50">
                   Total
                 </th>
               </tr>
@@ -332,24 +337,24 @@ export default function TimesheetDetailPage() {
             <tbody>
               {!timesheet.lines || timesheet.lines.length === 0 ? (
                 <tr>
-                  <td colSpan={days + 2} className="p-8 text-center text-muted-foreground">
+                  <td colSpan={days + 2} className="p-8 text-center text-muted-foreground text-sm">
                     Aucun projet ajouté. Cliquez sur "Ajouter un projet" pour commencer.
                   </td>
                 </tr>
               ) : (
                 timesheet.lines.map(line => (
                   <tr key={line.id} className="border-b hover:bg-muted/20 transition-colors group">
-                    <td className="sticky left-0 z-10 bg-card p-3 border-r shadow-[2px_0_5px_-2px_rgba(0,0,0,0.05)] group-hover:bg-muted/20">
-                      <div className="flex items-center justify-between">
-                        <div className="truncate pr-2">
-                          <div className="font-medium truncate" title={line.projectName}>{line.projectName}</div>
-                          <div className="text-xs text-muted-foreground">{line.projectCode} {line.client ? `• ${line.client}` : ''}</div>
+                    <td className="sticky left-0 z-10 bg-card px-2 py-1.5 border-r group-hover:bg-muted/20">
+                      <div className="flex items-center justify-between gap-1">
+                        <div className="truncate">
+                          <div className="font-medium truncate text-xs" title={line.projectName}>{line.projectName}</div>
+                          <div className="text-[10px] text-muted-foreground truncate">{line.projectCode} {line.client ? `• ${line.client}` : ''}</div>
                         </div>
                         {isEditable && (
                           <Button 
                             variant="ghost" 
                             size="icon" 
-                            className="h-6 w-6 opacity-0 group-hover:opacity-100 text-destructive hover:text-destructive hover:bg-destructive/10 shrink-0"
+                            className="h-5 w-5 opacity-0 group-hover:opacity-100 text-destructive hover:text-destructive hover:bg-destructive/10 shrink-0"
                             onClick={() => handleDeleteLine(line.id)}
                           >
                             <Trash2 className="h-3 w-3" />
@@ -370,38 +375,36 @@ export default function TimesheetDetailPage() {
                             "p-0 text-center border-r transition-colors select-none",
                             day.isWeekendDay ? "bg-muted/30" : "",
                             isEditable ? "cursor-pointer hover:bg-primary/10" : "",
-                            val > 0 ? "bg-primary/5 text-primary font-medium" : ""
+                            val > 0 ? "bg-primary/5 text-primary font-semibold" : ""
                           )}
                         >
-                          <div className="flex items-center justify-center h-12 w-full">
-                            {val === 0 ? <span className="opacity-0 group-hover:opacity-20">-</span> : val}
+                          <div className="flex items-center justify-center h-9 w-full text-xs">
+                            {val === 0 ? "" : val}
                           </div>
                         </td>
                       );
                     })}
                     
-                    <td className="p-3 text-center font-medium bg-card sticky right-0 z-10 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.05)] group-hover:bg-muted/20">
+                    <td className="px-1 py-1.5 text-center font-medium bg-card sticky right-0 z-10 group-hover:bg-muted/20">
                       {rowTotals[line.id] > 0 ? (
-                        <Badge variant="secondary" className="bg-primary/10 text-primary hover:bg-primary/20">
-                          {rowTotals[line.id]}h
-                        </Badge>
+                        <span className="text-primary text-xs font-bold">{rowTotals[line.id]}h</span>
                       ) : "-"}
                     </td>
                   </tr>
                 ))
               )}
             </tbody>
-            <tfoot className="sticky bottom-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 font-medium shadow-[0_-2px_5px_-2px_rgba(0,0,0,0.1)]">
+            <tfoot className="sticky bottom-0 z-20 bg-muted/80 backdrop-blur supports-[backdrop-filter]:bg-muted/50 font-medium">
               <tr>
-                <td className="sticky left-0 z-30 p-3 border-r text-right shadow-[2px_0_5px_-2px_rgba(0,0,0,0.1)]">
+                <td className="sticky left-0 z-30 px-2 py-1.5 border-r border-t text-right text-xs bg-muted/80">
                   Total du jour
                 </td>
                 {daysArray.map(day => (
-                  <td key={day.dateStr} className="p-2 text-center border-r">
+                  <td key={day.dateStr} className="px-0 py-1.5 text-center border-r border-t text-xs">
                     {colTotals[day.dateStr] > 0 ? colTotals[day.dateStr] : ""}
                   </td>
                 ))}
-                <td className="p-3 text-center text-primary text-lg sticky right-0 z-20 shadow-[-2px_0_5px_-2px_rgba(0,0,0,0.1)]">
+                <td className="px-1 py-1.5 text-center text-primary font-bold border-t sticky right-0 z-20 bg-muted/80">
                   {grandTotal}h
                 </td>
               </tr>