Add responsiviness to TaskList

Igalia · Nov 14, 2023 · f3e36f0 · f3e36f0
1 parent bcb7879
commit f3e36f0
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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} />