todo

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.html

@@ -280,6 +280,7 @@
   </div>
   
   <!-- Existing content -->
+  <div class="todo-table-container">
     <table class="table todo-table">
       <thead>
       <th class="c-col">#</th>
@@ -290,21 +291,17 @@
           <td class="c-col">{{i + 1}}</td>
           <td>{{todo}}</td>
           <td style="text-align:right">
-            <a routerLink="." (click)="removeTodo(i)">
+              <a (click)="removeTodo(i)" class="remove-button">
                   <clr-icon shape="times"></clr-icon>
               </a>
           </td>
       </tr>
-    <tr>
-        <td></td>
-        <td>
-          <input [(ngModel)]="todo" (keyup.enter)="addTodo(todo)" placeholder="Add Todo" class="clr-input todo-input">
-        </td>
-        <td style="text-align:right">
-            <a color='primary' (click)="addTodo(todo)" class="add-button">
-                <clr-icon shape="plus"></clr-icon>
-            </a>
-        </td>
-    </tr>
     </table>
   </div>
+  <div class="add-todo-section">
+    <input [(ngModel)]="todo" (keyup.enter)="addTodo(todo)" placeholder="Add Todo" class="clr-input todo-input">
+    <button (click)="addTodo(todo)" class="btn btn-primary add-button">
+      <clr-icon shape="plus"></clr-icon> Add
+    </button>
+  </div>
+</div>

frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.scss

@@ -1,3 +1,92 @@
+// To Do Chart specific styles
+.to-do-chart-container {
+  padding: 20px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.todo-table-container {
+  flex: 1;
+  overflow-y: auto;
+  max-height: 400px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-bottom: 20px; // Add margin at the bottom for spacing
+  
+  .todo-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0;
+    
+    th, td {
+      padding: 12px;
+      text-align: left;
+      border-bottom: 1px solid #ddd;
+    }
+    
+    th {
+      background-color: #f2f2f2;
+      font-weight: bold;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+    
+    tr:hover {
+      background-color: #f5f5f5;
+    }
+    
+    .c-col {
+      width: 50px;
+    }
+    
+    // Add padding at the bottom of the table body
+    tbody {
+      tr:last-child td {
+        padding-bottom: 20px; // Extra padding for the last row
+      }
+    }
+  }
+}
+
+.add-todo-section {
+  display: flex;
+  gap: 10px;
+  margin-top: 15px;
+  padding: 20px; // Increased padding all around
+  border-top: 1px solid #eee;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+  
+  .todo-input {
+    flex: 1;
+    padding: 12px; // Increased padding for better touch targets
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .add-button {
+    white-space: nowrap;
+    padding: 12px 20px; // Increased padding for better touch targets
+  }
+}
+
+.remove-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px; // Increased padding for better touch targets
+  border-radius: 3px;
+  color: #dc3545;
+  
+  &:hover {
+    background-color: #e0e0e0;
+  }
+}
+
 .filter-section {
   margin-bottom: 20px;
   padding: 15px;
@@ -189,61 +278,12 @@
       font-size: 16px;
     }
   }
+  
+  .add-todo-section {
+    flex-direction: column;
   }
   
-// To Do Chart specific styles
   .to-do-chart-container {
-  padding: 20px;
+    padding: 15px; // Adjust padding for mobile
-}
-
-.todo-table {
-  width: 100%;
-  border-collapse: collapse;
-  margin-top: 20px;
-  
-  th, td {
-    padding: 12px;
-    text-align: left;
-    border-bottom: 1px solid #ddd;
-  }
-  
-  th {
-    background-color: #f2f2f2;
-    font-weight: bold;
-  }
-  
-  tr:hover {
-    background-color: #f5f5f5;
-  }
-  
-  .c-col {
-    width: 50px;
-  }
-  
-  .todo-input {
-    width: 100%;
-    padding: 8px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-  }
-  
-  .add-button, .remove-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: 5px;
-    border-radius: 3px;
-    
-    &:hover {
-      background-color: #e0e0e0;
-    }
-  }
-  
-  .add-button {
-    color: #28a745;
-  }
-  
-  .remove-button {
-    color: #dc3545;
   }
 }