Fixed the resize issue

frontend/src/app/templates/templates.component.html

@@ -30,7 +30,7 @@
                  (cdkDropListDropped)="drop($event)"
                  [style.aspect-ratio]="page.width + ' / ' + page.height">
                  
-              <div *ngFor="let node of page.nodes" 
+              <div *ngFor="let node of page.nodes; let j = index" 
                    cdkDrag 
                    class="layout-node" 
                    [ngClass]="node.block_type.toLowerCase()"
@@ -38,6 +38,8 @@
                    [style.top.%]="(node.y_coordinate / node.page_height) * 100"
                    [style.width.%]="(node.width / node.page_width) * 100"
                    [style.height.%]="(node.height / node.page_height) * 100">
+                <i class="pi pi-bars drag-handle" cdkDragHandle title="Drag Item"></i>
+                <i class="pi pi-times close-icon" (click)="removeNode(i, j, $event)" title="Delete Item"></i>
                 <div class="node-type" *ngIf="node.height > 20">{{ node.block_type }}</div>
                 <div class="node-text">{{ node.text_value }}</div>
               </div>

frontend/src/app/templates/templates.component.scss

@@ -63,9 +63,9 @@
   background: rgba(255, 255, 255, 0.85);
   border: 1px solid var(--surface-border);
   border-radius: 2px;
-  cursor: grab;
   transition: box-shadow 0.2s, border-color 0.2s;
   overflow: hidden;
+  resize: both;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -107,6 +107,58 @@
   &.table_header { border-color: #F59E0B; }
   &.total { border-color: #10B981; }
   &.tax { border-color: #EF4444; }
+
+  .drag-handle {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    font-size: 0.6rem;
+    color: var(--text-color-secondary);
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 2px;
+    padding: 2px;
+    cursor: grab;
+    opacity: 0;
+    transition: opacity 0.2s;
+    z-index: 20;
+
+    &:active {
+      cursor: grabbing;
+    }
+    
+    &:hover {
+      color: var(--primary-color);
+      background: var(--primary-50);
+    }
+  }
+
+  &:hover .drag-handle {
+    opacity: 1;
+  }
+
+  .close-icon {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    font-size: 0.6rem;
+    color: var(--text-color-secondary);
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 50%;
+    padding: 2px;
+    cursor: pointer;
+    opacity: 0;
+    transition: opacity 0.2s;
+    z-index: 20;
+
+    &:hover {
+      color: var(--red-500);
+      background: var(--red-50);
+    }
+  }
+
+  &:hover .close-icon {
+    opacity: 1;
+  }
 }
 
 /* Template Mapping Side */

frontend/src/app/templates/templates.component.ts

@@ -187,4 +187,9 @@ export class TemplatesComponent implements OnInit {
   getCanvasDropLists() {
     return this.pages.map((_, i) => 'document-layout-list-' + i);
   }
+
+  removeNode(pageIndex: number, nodeIndex: number, event: Event) {
+    event.stopPropagation();
+    this.pages[pageIndex].nodes.splice(nodeIndex, 1);
+  }
 }