Adjust styles

src/app/profile/dashboard/orientations-table/orientations-table.component.html

@@ -23,14 +23,14 @@
     (click)="navigateToDetails($event, orientation._id)"
     (keyup.enter)="navigateToDetails($event, orientation._id)"
   >
-    <div>
+    <div class="col">
       <div class="name">{{ orientation.personOriented.name }} {{ orientation.personOriented.surname | uppercase }}</div>
       <div class="date inline">
         <app-svg-icon [icon]="'clock'" [folder]="'ico'" [iconClass]="'icon-12'" />
         Il y a {{ this.orientationService.daysAgo(orientation.createdAt) }} jour(s)
       </div>
     </div>
-    <div>
+    <div class="col">
       <app-tag-item
         *ngIf="orientation.socialWorker"
         class="hide-on-mobile"
@@ -60,7 +60,7 @@
         [icon]="orientation.socialWorker.avatar || 'avatar1'"
       />
     </div>
-    <div>
+    <div class="col">
       <app-tag-item
         *ngIf="orientation.structureChoice[0]"
         class="hide-on-mobile"
@@ -80,7 +80,7 @@
         [icon]="this.orientationService.getStructureTypeIcon(orientation.structureChoice[0]?.structureType?.category)"
       />
     </div>
-    <div>
+    <div class="col">
       <app-tag-item
         *ngIf="orientation.status"
         [label]="this.orientationService.getTagProperty('status', orientation.status, 'label')"
@@ -98,7 +98,7 @@
         "
       />
     </div>
-    <div>
+    <div class="col">
       <app-tag-item
         *ngIf="from === 'myOrientations' && orientation.accompanimentType"
         [label]="this.orientationService.getTagProperty('type', orientation.accompanimentType, 'label')"
@@ -116,6 +116,6 @@
         [iconName]="this.orientationService.getTagProperty('action', orientation.action, 'icon')"
       />
     </div>
-    <div class="hide-on-mobile">🢒</div>
+    <div class="col hide-on-mobile">🢒</div>
   </a>
 </div>

src/app/profile/dashboard/orientations-table/orientations-table.component.scss

@@ -22,6 +22,14 @@
   }
   a {
     all: unset;
+    cursor: pointer;
+    ::ng-deep {
+      button.grey:hover {
+        background-color: $grey-7;
+        border-color: $grey-7;
+        color: $grey-3;
+      }
+    }
   }
   .row {
     border: 1px solid $grey-7;
@@ -31,9 +39,6 @@
     background-color: $white;
     &.new {
       border-color: $blue-dark;
-      @media #{$tablet} {
-        border-color: $grey-7;
-      }
     }
     &.urgent {
       border-color: $orange;
@@ -87,7 +92,7 @@
   // Column widths
   .header > div:nth-child(1),
   .row > div:nth-child(1) {
-    width: 25%;
+    width: 22%;
     place-items: flex-start;
     text-align: start;
     display: flex;
@@ -117,19 +122,19 @@
   }
   .header > div:nth-child(3),
   .row > div:nth-child(3) {
-    width: 25%;
+    width: 20%;
   }
   .header > div:nth-child(4),
   .row > div:nth-child(4) {
-    width: 12%;
+    width: 14%;
   }
   .header > div:nth-child(5),
   .row > div:nth-child(5) {
-    width: 12%;
+    width: 20%;
   }
   .header > div:nth-child(6),
   .row > div:nth-child(6) {
-    width: 5%;
+    width: 3%;
     padding-right: 2px;
     text-align: end;
     color: initial;