From 1012c1ed825d394d1bc966e34de2a113482df119 Mon Sep 17 00:00:00 2001
From: Sourabh Saraswat <saraswatsourabh5@gmail.com>
Date: Wed, 14 Apr 2021 15:36:00 +0530
Subject: [PATCH] [ui] Improve the mobile view of the dashboard

This commit improves the mobile UI of sortinghat
dashboard. It fixes the issues of the content overflowing.

Signed-off-by: Sourabh Saraswat <saraswatsourabh5@gmail.com>
---
 ui/src/components/IndividualEntry.vue |  6 ++++--
 ui/src/components/WorkSpace.vue       |  4 ++--
 ui/src/views/Dashboard.vue            | 12 ++++++++++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/IndividualEntry.vue b/ui/src/components/IndividualEntry.vue
index d851ea55c..d85c6cfbb 100644
--- a/ui/src/components/IndividualEntry.vue
+++ b/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 --git a/ui/src/components/WorkSpace.vue b/ui/src/components/WorkSpace.vue
index 7e029b1d2..19ead25f9 100644
--- a/ui/src/components/WorkSpace.vue
+++ b/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 --git a/ui/src/views/Dashboard.vue b/ui/src/views/Dashboard.vue
index 65b83928b..8b7169917 100644
--- a/ui/src/views/Dashboard.vue
+++ b/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;
 }