use a drag handle with icon

pdb-js/src/app/dashboard-page/dashboard/dashboard.component.html

@@ -2,7 +2,6 @@
   :host {
     width: 100%;
     height: 100%;
-    
   }
   .center {
     position: absolute;
@@ -26,19 +25,19 @@
     display: flex;
     flex-direction: column;
   }
-  .editable .editable-hovered {
-    visibility: hidden;
-  }
-  .editable:hover .editable-hovered {
-    visibility: visible;
-  }
+
   .handle {
+    display: block;
     height: 1.5em;
+    visibility: hidden;
+    width: fit-content;
+  }
+  [cdkDrag] {
+    position: relative;
   }
   [cdkDrag]:hover .handle, .cdk-drop-list-dragging .handle {
-    background-color: #f3f3f3;
-    border-radius: 3px;
     cursor: grab;
+    visibility: visible;
   }
 </style>
 
@@ -71,7 +70,7 @@
         cdkDrag 
         *ngFor="let id of column" 
         [attr.widget-id]="id">
-        <div cdkDragHandle class="handle"></div>
+        <div cdkDragHandle class="handle"><img src="/assets/img/drag_handle.svg" class="icon-small"/></div>
         <app-text-widget 
           *ngIf="isTextWidget(id)"
           [data]="getTextWidget(id)!" (deleted)="delete($event)"></app-text-widget>

pdb-js/src/app/dashboard-page/dashboard/plot-widget/plot-widget.component.html

@@ -20,7 +20,13 @@
     cursor: zoom-in;
   }
 
-  .editable-hovered {
+  .top-left {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  .top-right {
     position: absolute;
     right: 0;
     top: 0;
@@ -34,7 +40,7 @@
   }
 </style>
 <div class="dashboard-card" [ngClass]="{'size-medium' : true}">
-  <div class="editable-hovered">
+  <div class="editable-hovered top-right">
     <button mat-icon-button (click)="edit()" ><img src="/assets/img/edit-outline.svg"/></button>
     <button mat-icon-button (click)="delete()"><img src="/assets/img/recycle-bin-line.svg"/></button>
   </div>

pdb-js/src/app/dashboard-page/dashboard/text-widget/text-widget.component.html

@@ -4,7 +4,7 @@
   }
   .text-widget {
     position: relative;
-    padding: 1em 0;
+    padding-bottom: 1em;
   }
   .text-widget:hover {
     /*outline: solid 1px black;/**/