From f3e36f0bef872e7467c91d0b1936fd48bb56bdf2 Mon Sep 17 00:00:00 2001
From: Leonardo Negreiros de Oliveira <negreirosleo12@gmail.com>
Date: Mon, 13 Nov 2023 15:16:04 -0300
Subject: [PATCH] Add responsiviness to TaskList

---
 frontend/src/app/tasks/TaskForm.tsx | 3 +--
 frontend/src/app/tasks/TaskList.tsx | 9 +++++++--
 frontend/src/app/tasks/page.tsx     | 5 +++--
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/tasks/TaskForm.tsx b/frontend/src/app/tasks/TaskForm.tsx
index e6d63928a..c10b2e0fc 100644
--- a/frontend/src/app/tasks/TaskForm.tsx
+++ b/frontend/src/app/tasks/TaskForm.tsx
@@ -41,8 +41,7 @@ export const TaskForm = ({ projects, taskTypes, userId }: TaskFormProps) => {
         handleSubmit()
       }}
       component="form"
-      maxWidth="558px"
-      margin="0 auto"
+      sx={{ maxWidth: { xs: '100%', sm: '558px' } }}
       gap="16px"
       ref={formRef}
     >
diff --git a/frontend/src/app/tasks/TaskList.tsx b/frontend/src/app/tasks/TaskList.tsx
index 48c70d9d4..dce005915 100644
--- a/frontend/src/app/tasks/TaskList.tsx
+++ b/frontend/src/app/tasks/TaskList.tsx
@@ -30,14 +30,19 @@ export const TaskList = ({ userId }: TaskListProps) => {
   return (
     <Box
       component="ul"
-      sx={{ width: '558px', display: 'flex', flexDirection: 'column', gap: '16px' }}
+      sx={{
+        maxWidth: { xs: '100%', sm: '558px' },
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '16px'
+      }}
     >
       {tasks.map((task) => (
         <Box
           sx={{
             backgroundColor: '#A8AEEB',
             height: '96px',
-            width: '558px',
+            width: { xs: '100%', sm: '558px' },
             display: 'flex',
             flexDirection: 'column',
             borderRadius: '8px',
diff --git a/frontend/src/app/tasks/page.tsx b/frontend/src/app/tasks/page.tsx
index f7c6e1d7b..b73469020 100644
--- a/frontend/src/app/tasks/page.tsx
+++ b/frontend/src/app/tasks/page.tsx
@@ -23,10 +23,11 @@ export default async function Tasks() {
     <Box
       sx={{
         display: 'flex',
-        flexDirection: 'row',
+        flexDirection: { xs: 'column', sm: 'row' },
         margin: '0 auto',
         gap: '30px',
-        justifyContent: 'center'
+        justifyContent: 'center',
+        padding: { xs: '0 8px', sm: 0 }
       }}
     >
       <TaskForm projects={projects} taskTypes={taskTypes} userId={currentUser.id} />