feature/IO-3291-Tasks-Notifications: Checkpoint

client/src/components/task-center/task-center.styles.scss

@@ -28,20 +28,19 @@
     h3 {
       margin: 0;
       font-size: 13px;
-      color: rgba(0, 0, 0, 0.85);
     }
   }
 
   .task-section {
-    margin-bottom: 2px;
+    margin: 0;
+    padding: 0;
   }
 
   .section-title {
     padding: 3px 10px;
-    background: #f5f5f5;
     margin: 0;
     font-size: 12px;
-    color: rgba(0, 0, 0, 0.85);
+    background: #f5f5f5;
     font-weight: 500;
     border-bottom: 1px solid #e8e8e8;
     position: sticky;
@@ -49,64 +48,52 @@
     z-index: 1;
   }
 
-  .task-item {
-    padding: 6px 10px;
-    border-bottom: 1px solid #f0f0f0;
-    background: #fff;
-    cursor: pointer;
-
-    &:hover {
-      background: #f5f5f5;
-    }
-
-    .task-content {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
-
-    .task-header-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-
-      .task-title {
-        font-size: 13px;
-        font-weight: 600;
-        color: rgba(0, 0, 0, 0.9);
-        margin-right: 6px;
-        flex: 1;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-      }
-
-      .task-due-date {
-        font-size: 11px;
-        color: rgba(0, 0, 0, 0.45);
-        white-space: nowrap;
-      }
-    }
-
-    .task-description {
-      font-size: 12px;
-      color: rgba(0, 0, 0, 0.65);
-    }
-
-    .task-ro-number {
-      font-size: 11px;
-      color: rgba(0, 0, 0, 0.45);
-    }
-  }
-
-  .ant-badge {
+  .task-table {
     width: 100%;
 
-    .ant-badge-dot {
-      width: 6px;
-      height: 6px;
-      top: 2px;
-      right: 2px;
+    border-collapse: collapse;
+
+    .task-row {
+      cursor: pointer;
+      border-bottom: 1px solid #f0f0f0;
+
+      &:hover {
+        background: #f5f5f5;
+      }
+
+      td {
+        padding: 6px 8px;
+        vertical-align: top;
+        font-size: 12px;
+        line-height: 1.2;
+      }
+
+      .task-title-cell {
+        width: 100%;
+        max-width: 300px; // or whatever fits your layout
+
+        .task-title {
+          font-weight: 500;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: 100%; // Or a specific width if you want more control
+          display: inline-block;
+          vertical-align: middle;
+        }
+
+        .task-ro-number {
+          margin-top: 5px;
+          font-size: 11px;
+          color: rgba(0, 0, 0, 0.45);
+        }
+      }
+
+      .task-due-cell {
+        text-align: right;
+        white-space: nowrap;
+        color: rgba(0, 0, 0, 0.45);
+      }
     }
   }
 
@@ -129,4 +116,9 @@
       cursor: not-allowed;
     }
   }
+
+  .ReactVirtuoso__item {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
 }