Improve Mobile UI of Sortinghat dashboard

As the content in mobile view of dashboard is
not arranged properly.
So, this commit improves the Mobile UI of Sortinghat Dashboard
It Includes fixes of content Overflowing and their proper
arrangement in Mobile UI.

Signed-off-by: Sourabh Saraswat <[email protected]>

Author: SourabhSaraswat-191939

Diff for: ui/src/components/IndividualEntry.vue

@@ -85,7 +85,7 @@
       </v-list-item>
     </td>
 
-    <td class="text-center">
+    <td class="d-none d-sm-none d-md-table-cell text-center">
       <span v-if="isLocked" class="mr-7">{{ email }}</span>
       <v-edit-dialog v-else @save="$emit('edit', { email: form.email })">
         {{ email }}
@@ -103,7 +103,7 @@
       </v-edit-dialog>
     </td>
 
-    <td class="text-right">
+    <td class="d-none d-sm-table-cell text-right">
       <v-tooltip
         v-for="(source, index) in sources"
         :key="index"
@@ -294,6 +294,7 @@ export default {
 }
 .v-list-item__title {
   text-overflow: inherit;
+  width: 100px;
 }
 .aligned {
   margin-bottom: 4px;
@@ -331,4 +332,5 @@ tr {
     }
   }
 }
+
 </style>

Diff for: ui/src/components/WorkSpace.vue

@@ -8,7 +8,7 @@
     @dragenter.prevent="onDrag($event)"
     @dragleave.prevent="isDragging = false"
   >
-    <v-row class="ma-md-0 pt-md-4 pl-md-4 pr-md-4 justify-space-between">
+    <v-row class="ma-md-0 pt-md-4 pl-md-4 pr-md-4 ml-0 mr-0 justify-space-between">
       <h3 class="title">
         <v-icon color="black" left>
           mdi-pin
@@ -47,7 +47,7 @@
     <v-row
       v-if="savedIndividuals.length >= 1"
       dense
-      class="pa-md-4 ma-md-0 drag-zone"
+      class="pa-md-4 ma-md-0 ml-0 mr-0 drag-zone"
     >
       <v-col
         v-for="individual in savedIndividuals"

Diff for: ui/src/views/Dashboard.vue

@@ -283,6 +283,10 @@ export default {
 .row {
   justify-content: space-between;
   margin: 32px;
+
+  @media (max-width: 960px) {
+    margin: 0;
+  }
 }
 .individuals {
   width: 70%;
@@ -299,9 +303,17 @@ export default {
 
   @media (max-width: 960px) {
     max-width: 100%;
+    min-width: 100%;
     margin: 32px 0 0 0;
   }
 }
+
+.container{
+  @media (max-width: 960px) {
+   padding: 0;
+  }
+}
+
 h4 {
   padding: 12px 26px;
 }