From dd682024fd9d33150fff06a4ce9bf72bd43c2763 Mon Sep 17 00:00:00 2001
From: R0m1k3 <michaelschal@gmail.com>
Date: Wed, 10 Dec 2025 13:16:45 +0100
Subject: [PATCH] feat: implement mobile task management page for mobile
 devices, including task creation, editing, and listing.

---
 client/src/pages/mobile/TasksPage.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/mobile/TasksPage.tsx b/client/src/pages/mobile/TasksPage.tsx
index 0d36e08..0822671 100644
--- a/client/src/pages/mobile/TasksPage.tsx
+++ b/client/src/pages/mobile/TasksPage.tsx
@@ -217,8 +217,8 @@ function TaskCard({
     const isCompleted = task.status === 'completed';
 
     return (
-        <Card className={`mb-3 ${isCompleted ? 'opacity-60' : ''}`}>
-            <CardContent className="p-4">
+        <Card className={`mb-3 overflow-hidden ${isCompleted ? 'opacity-60' : ''}`}>
+            <CardContent className="p-3">
                 {/* Header: Priority + Due Date */}
                 <div className="flex items-center justify-between mb-2">
                     <Badge className={`${priority.color} border text-xs`}>
@@ -234,13 +234,13 @@ function TaskCard({
                 </div>
 
                 {/* Title */}
-                <h3 className={`font-semibold text-base mb-1 ${isCompleted ? 'line-through text-gray-500' : ''}`}>
+                <h3 className={`font-semibold text-base mb-1 break-words ${isCompleted ? 'line-through text-gray-500' : ''}`}>
                     {task.title}
                 </h3>
 
                 {/* Description */}
                 {task.description && (
-                    <p className="text-sm text-gray-600 mb-3 line-clamp-2">{task.description}</p>
+                    <p className="text-sm text-gray-600 mb-3 line-clamp-2 break-words">{task.description}</p>
                 )}
 
                 {/* Assigned To */}
@@ -421,7 +421,7 @@ export default function MobileTasksPage() {
             </div>
 
             {/* Task List */}
-            <div className="p-4">
+            <div className="px-3 py-2 overflow-hidden" style={{ maxWidth: '100%' }}>
                 {filteredTasks.length === 0 ? (
                     <div className="text-center py-12 text-gray-500">
                         <ListTodo className="w-12 h-12 mx-auto mb-3 opacity-50" />