From 9fdf930767f76f9f1770dbc70bb1d53e31178204 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Luc=C3=A0s?= <vabrelucas@gmail.com>
Date: Tue, 16 Aug 2022 20:25:17 +0200
Subject: [PATCH] Handle long task

---
 src/app/todolist/todolist.component.html | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/app/todolist/todolist.component.html b/src/app/todolist/todolist.component.html
index 8886674..10f5ace 100644
--- a/src/app/todolist/todolist.component.html
+++ b/src/app/todolist/todolist.component.html
@@ -1,7 +1,7 @@
 <div class="card m-auto w-96 bg-base-100 shadow-xl">
   <div class="card-body">
 
-    <!--        Input-->
+    <!-- Input -->
     <div class="form-control">
       <div class="input-group justify-center">
         <input type="text" placeholder="Type here your task..."
@@ -17,7 +17,7 @@
       </div>
     </div>
 
-    <!--        List-->
+    <!-- List -->
     <div class="form-control" *ngFor="let todoItem of todoList">
       <label class="label cursor-pointer" for="task-{{ todoItem.id }}">
         <input type="checkbox" checked="checked"
@@ -25,7 +25,7 @@
                id="task-{{ todoItem.id }}" name="task-{{ todoItem.id }}"
                [(ngModel)]="todoItem.completed" (change)="saveList()"/>
 
-        <span class="label-text">{{ todoItem.task }}</span>
+        <span class="label-text  text-base break-all mx-2">{{ todoItem.task }}</span>
 
         <button class="btn btn-error btn-square btn-outline"
                 (click)="removeItem(todoItem.id)">
@@ -40,7 +40,6 @@
       </label>
     </div>
 
-
     <div class="card-actions justify-between">
       You have {{ todoList.length }} pending task(s)
       <button class="btn btn-error" (click)="clearList()">Clear All</button>