From dc72e6ef5f5023acd50eacf105041f233f9a5886 Mon Sep 17 00:00:00 2001
From: bytevictor <victorgonzarg@gmail.com>
Date: Thu, 28 Mar 2024 19:19:27 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20fix:=20fixed=20responsiveness=20?=
 =?UTF-8?q?on=20mobile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/Components/TasksApp/TaskList.tsx | 6 +++---
 app/page.tsx                         | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/Components/TasksApp/TaskList.tsx b/app/Components/TasksApp/TaskList.tsx
index 557e988..7ee3d6b 100644
--- a/app/Components/TasksApp/TaskList.tsx
+++ b/app/Components/TasksApp/TaskList.tsx
@@ -12,7 +12,7 @@ export default function TaskList({
 }) {
   return (
     <ul
-      className="w-1/2 mt-24 flex justify-center flex-col"
+      className="lg:w-1/2 w-full mt-24 flex justify-center flex-col"
     >
       {[...tasks].reverse().map((task: any) => (
         <li className="flex flex-row w-full my-2" key={task.id}>
@@ -101,7 +101,7 @@ function Task({
   return (
     <label className="w-full grid grid-cols-5 grid-rows-1">
       <input
-        className="checkbox self-center checkbox-lg"
+        className="checkbox self-center checkbox-lg ml-4 lg:ml-0"
         type="checkbox"
         checked={task.done}
         onChange={(e) => {
@@ -123,7 +123,7 @@ function Task({
           onDelete(task.id);
           playSoundDelete();
         }}
-        className="btn btn-md btn-circle btn-outline btn-error self-end justify-self-end"
+        className="btn btn-md btn-circle btn-outline btn-error self-end justify-self-end mr-4 lg:mr-0"
       >
         <TrashIcon />
       </button>
diff --git a/app/page.tsx b/app/page.tsx
index c7052a8..6c91fec 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,7 +4,7 @@ import TaskApp from "./Components/TasksApp/TaskApp";
 
 export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center p-24 pt-0">
+    <main className="flex min-h-screen flex-col items-center lg:pt-0 lg:p-24 md:p-0 pt-0">
       <TaskApp />
     </main>
   );