From 3a8183f6a552db7713cf3253406de99b1f6e94bb Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Wed, 10 Dec 2025 13:09:24 +0100
Subject: [PATCH] feat: Add mobile tasks page with task creation, editing, and
 listing functionalities.

---
 client/src/pages/mobile/TasksPage.tsx | 53 ++++++++++++++++-----------
 1 file changed, 32 insertions(+), 21 deletions(-)

diff --git a/client/src/pages/mobile/TasksPage.tsx b/client/src/pages/mobile/TasksPage.tsx
index f2aebfe..0d36e08 100644
--- a/client/src/pages/mobile/TasksPage.tsx
+++ b/client/src/pages/mobile/TasksPage.tsx
@@ -367,14 +367,14 @@ export default function MobileTasksPage() {
     }
 
     return (
-        <div className="min-h-screen bg-gray-50 pb-24 overflow-x-hidden max-w-full">
+        <div className="min-h-screen bg-gray-50 pb-24 overflow-hidden" style={{ maxWidth: '100vw' }}>
             {/* Header */}
             <div className="bg-white border-b sticky top-0 z-40">
-                <div className="p-4">
-                    <div className="flex items-center justify-between mb-4">
+                <div className="px-3 py-3">
+                    <div className="flex items-center justify-between mb-3">
                         <div className="flex items-center gap-2">
-                            <ListTodo className="w-6 h-6 text-blue-600" />
-                            <h1 className="text-xl font-bold">Tâches</h1>
+                            <ListTodo className="w-5 h-5 text-blue-600" />
+                            <h1 className="text-lg font-bold">Tâches</h1>
                         </div>
                         <Badge variant="secondary">{filteredTasks.length}</Badge>
                     </div>
@@ -386,25 +386,36 @@ export default function MobileTasksPage() {
                             placeholder="Rechercher..."
                             value={searchTerm}
                             onChange={(e) => setSearchTerm(e.target.value)}
-                            className="pl-10 h-11"
+                            className="pl-10 h-10 text-sm"
                         />
                     </div>
 
-                    {/* Tabs */}
-                    <div className="flex gap-1 w-full">
-                        {(['pending', 'completed', 'all'] as const).map((tab) => (
-                            <Button
-                                key={tab}
-                                variant={activeTab === tab ? 'default' : 'outline'}
-                                size="sm"
-                                onClick={() => setActiveTab(tab)}
-                                className="flex-1 h-10 text-xs px-2 min-w-0"
-                            >
-                                {tab === 'pending' && 'En cours'}
-                                {tab === 'completed' && 'Faites'}
-                                {tab === 'all' && 'Toutes'}
-                            </Button>
-                        ))}
+                    {/* Tabs - Grid layout pour garantir 3 colonnes égales */}
+                    <div className="grid grid-cols-3 gap-1">
+                        <Button
+                            variant={activeTab === 'pending' ? 'default' : 'outline'}
+                            size="sm"
+                            onClick={() => setActiveTab('pending')}
+                            className="h-9 text-xs px-1 truncate"
+                        >
+                            ⏳ Actives
+                        </Button>
+                        <Button
+                            variant={activeTab === 'completed' ? 'default' : 'outline'}
+                            size="sm"
+                            onClick={() => setActiveTab('completed')}
+                            className="h-9 text-xs px-1 truncate"
+                        >
+                            ✅ Faites
+                        </Button>
+                        <Button
+                            variant={activeTab === 'all' ? 'default' : 'outline'}
+                            size="sm"
+                            onClick={() => setActiveTab('all')}
+                            className="h-9 text-xs px-1 truncate"
+                        >
+                            📋 Toutes
+                        </Button>
                     </div>
                 </div>
             </div>