From 2887a6a750ad504d8aa55601d6e91053f1e3215f Mon Sep 17 00:00:00 2001
From: Julien Froidefond <julien.froidefond@cdbdx.biz>
Date: Sun, 21 Dec 2025 13:25:27 +0100
Subject: [PATCH] feat: enhance Sidebar and TransactionTable components with
 improved accessibility and layout adjustments; add SheetTitle for navigation
 context and refine padding and width for better responsiveness

---
 components/dashboard/sidebar.tsx              |  3 +-
 components/layout/page-layout.tsx             |  2 +-
 components/transactions/transaction-table.tsx | 37 ++++++++++---------
 3 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/components/dashboard/sidebar.tsx b/components/dashboard/sidebar.tsx
index 0f125ad..05f62d9 100644
--- a/components/dashboard/sidebar.tsx
+++ b/components/dashboard/sidebar.tsx
@@ -18,7 +18,7 @@ import {
   LogOut,
 } from "lucide-react";
 import { toast } from "sonner";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { useLocalStorage } from "@/hooks/use-local-storage";
 
@@ -165,6 +165,7 @@ export function Sidebar({ open, onOpenChange }: SidebarProps) {
     return (
       <Sheet open={open} onOpenChange={onOpenChange}>
         <SheetContent side="left" className="w-64 p-0">
+          <SheetTitle className="sr-only">Navigation</SheetTitle>
           <div className="flex flex-col h-full">
             <SidebarContent
               showHeader
diff --git a/components/layout/page-layout.tsx b/components/layout/page-layout.tsx
index 7e5128d..bd9e217 100644
--- a/components/layout/page-layout.tsx
+++ b/components/layout/page-layout.tsx
@@ -18,7 +18,7 @@ export function PageLayout({ children }: PageLayoutProps) {
       <div className="flex h-screen bg-background overflow-hidden page-background">
         <Sidebar open={sidebarOpen} onOpenChange={setSidebarOpen} />
         <main className="flex-1 overflow-auto overflow-x-hidden page-content">
-          <div className="p-6 md:p-8 lg:p-10 space-y-6 md:space-y-8 max-w-full">
+          <div className="p-3 md:p-8 lg:p-10 space-y-4 md:space-y-8 max-w-full">
             {children}
           </div>
         </main>
diff --git a/components/transactions/transaction-table.tsx b/components/transactions/transaction-table.tsx
index 5c09eb1..501078d 100644
--- a/components/transactions/transaction-table.tsx
+++ b/components/transactions/transaction-table.tsx
@@ -155,7 +155,7 @@ export function TransactionTable({
   const parentRef = useRef<HTMLDivElement>(null);
   const isMobile = useIsMobile();
 
-  const MOBILE_ROW_HEIGHT = 120;
+  const MOBILE_ROW_HEIGHT = 140;
 
   const virtualizer = useVirtualizer({
     count: transactions.length,
@@ -227,17 +227,17 @@ export function TransactionTable({
   );
 
   return (
-    <Card className="overflow-hidden">
-      <CardContent className="p-0">
+    <Card className="overflow-hidden w-full">
+      <CardContent className="p-0 w-full">
         {transactions.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-12">
             <p className="text-muted-foreground">Aucune transaction trouvée</p>
           </div>
         ) : isMobile ? (
-          <div className="divide-y divide-border">
+          <div className="divide-y divide-border w-full">
             <div
               ref={parentRef}
-              className="overflow-auto"
+              className="overflow-auto w-full"
               style={{ height: "calc(100vh - 200px)", minHeight: "600px" }}
             >
               <div
@@ -278,30 +278,31 @@ export function TransactionTable({
                         }
                       }}
                       className={cn(
-                        "p-4 space-y-3 hover:bg-muted/50 cursor-pointer border-b border-border",
+                        "p-4 md:p-4 space-y-3 hover:bg-muted/50 cursor-pointer border-b border-border",
                         transaction.isReconciled && "bg-emerald-500/5",
                         isFocused && "bg-primary/10 ring-1 ring-primary/30",
                         isDuplicate && "shadow-sm"
                       )}
                     >
-                      <div className="flex items-start justify-between gap-2">
-                        <div className="flex items-start gap-3 flex-1 min-w-0">
+                      <div className="flex items-start justify-between gap-3">
+                        <div className="flex items-start gap-0 md:gap-3 flex-1 min-w-0">
                           <Checkbox
                             checked={selectedTransactions.has(transaction.id)}
                             onCheckedChange={() => {
                               onToggleSelectTransaction(transaction.id);
                             }}
                             onClick={(e) => e.stopPropagation()}
+                            className="mt-0.5 hidden md:flex"
                           />
                           <div className="flex-1 min-w-0">
                             <div className="flex items-center gap-2">
-                              <p className="font-medium text-xs md:text-sm truncate">
+                              <p className="font-medium text-sm md:text-sm truncate leading-tight">
                                 {transaction.description}
                               </p>
                               {isDuplicate && (
                                 <Tooltip delayDuration={200}>
                                   <TooltipTrigger asChild>
-                                    <AlertTriangle className="h-3 w-3 md:h-4 md:w-4 text-[var(--warning)] shrink-0" />
+                                    <AlertTriangle className="h-4 w-4 md:h-4 md:w-4 text-[var(--warning)] shrink-0" />
                                   </TooltipTrigger>
                                   <TooltipContent>
                                     <p>
@@ -312,7 +313,7 @@ export function TransactionTable({
                               )}
                             </div>
                             {transaction.memo && (
-                              <p className="text-[10px] md:text-xs text-muted-foreground truncate mt-1">
+                              <p className="text-xs md:text-xs text-muted-foreground truncate mt-1.5">
                                 {transaction.memo}
                               </p>
                             )}
@@ -320,7 +321,7 @@ export function TransactionTable({
                         </div>
                         <div
                           className={cn(
-                            "font-semibold tabular-nums text-sm md:text-base shrink-0",
+                            "font-semibold tabular-nums text-base md:text-base shrink-0",
                             transaction.amount >= 0
                               ? "text-emerald-600"
                               : "text-red-600"
@@ -331,18 +332,18 @@ export function TransactionTable({
                         </div>
                       </div>
 
-                      <div className="flex items-center gap-2 md:gap-3 flex-wrap">
-                        <span className="text-[10px] md:text-xs text-muted-foreground">
+                      <div className="flex items-center gap-2.5 md:gap-3 flex-wrap">
+                        <span className="text-xs md:text-xs text-muted-foreground">
                           {formatDate(transaction.date)}
                         </span>
                         {account && (
-                          <span className="text-[10px] md:text-xs text-muted-foreground">
+                          <span className="text-xs md:text-xs text-muted-foreground">
                             • {account.name}
                           </span>
                         )}
                         <div
                           onClick={(e) => e.stopPropagation()}
-                          className="flex-1 relative"
+                          className="flex-1 relative min-w-[120px]"
                         >
                           {updatingTransactionIds.has(transaction.id) && (
                             <div className="absolute inset-0 flex items-center justify-center bg-background/50 z-10 rounded">
@@ -370,9 +371,9 @@ export function TransactionTable({
                             <Button
                               variant="ghost"
                               size="icon"
-                              className="h-8 w-8 shrink-0"
+                              className="h-9 w-9 shrink-0"
                             >
-                              <MoreVertical className="w-4 h-4" />
+                              <MoreVertical className="w-5 h-5" />
                             </Button>
                           </DropdownMenuTrigger>
                           <DropdownMenuContent align="end">