💄 fix: fixed responsiveness on mobile

bytevictor · Mar 28, 2024 · dc72e6e · dc72e6e
1 parent f538c68
commit dc72e6e
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git 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
@@ -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>
   );