From 4131b6c11181a17b74dc89ac50fcd167cf8b4e4f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Wed, 5 Jun 2024 17:24:12 +0530
Subject: [PATCH] fix: padding/margin fix for listviews for mobile view

---
 .../components/ListViews/CallLogsListView.vue |  7 +++---
 .../components/ListViews/ContactsListView.vue | 10 +++++----
 .../components/ListViews/DealsListView.vue    |  4 ++--
 .../ListViews/EmailTemplatesListView.vue      |  7 +++---
 .../components/ListViews/LeadsListView.vue    |  4 ++--
 .../src/components/ListViews/ListRows.vue     |  4 ++--
 .../ListViews/OrganizationsListView.vue       |  7 +++---
 .../components/ListViews/TasksListView.vue    | 10 +++++----
 frontend/src/components/ViewControls.vue      | 22 ++++++++++---------
 frontend/src/pages/Notes.vue                  |  4 ++--
 10 files changed, 41 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/ListViews/CallLogsListView.vue b/frontend/src/components/ListViews/CallLogsListView.vue
index 095973c6..6f7bce67 100644
--- a/frontend/src/components/ListViews/CallLogsListView.vue
+++ b/frontend/src/components/ListViews/CallLogsListView.vue
@@ -11,7 +11,7 @@
     row-key="name"
     v-bind="$attrs"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+    <ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
@@ -29,9 +29,8 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows id="list-rows">
+    <ListRows class="mx-3 sm:mx-5" id="list-rows">
       <ListRow
-        class="mx-5"
         v-for="row in rows"
         :key="row.name"
         v-slot="{ idx, column, item }"
@@ -141,7 +140,7 @@
     </ListSelectBanner>
   </ListView>
   <ListFooter
-    class="border-t px-5 py-2"
+    class="border-t sm:px-5 px-3 py-2"
     v-model="pageLengthCount"
     :options="{
       rowCount: options.rowCount,
diff --git a/frontend/src/components/ListViews/ContactsListView.vue b/frontend/src/components/ListViews/ContactsListView.vue
index 2550f76a..26fbc18a 100644
--- a/frontend/src/components/ListViews/ContactsListView.vue
+++ b/frontend/src/components/ListViews/ContactsListView.vue
@@ -14,7 +14,10 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+    <ListHeader
+      class="mx-3 sm:mx-5"
+      @columnWidthUpdated="emit('columnWidthUpdated')"
+    >
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
@@ -32,9 +35,8 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows id="list-rows">
+    <ListRows class="mx-3 sm:mx-5" id="list-rows">
       <ListRow
-        class="mx-5"
         v-for="row in rows"
         :key="row.name"
         v-slot="{ idx, column, item }"
@@ -136,7 +138,7 @@
   </ListView>
   <ListFooter
     v-if="pageLengthCount"
-    class="border-t px-5 py-2"
+    class="border-t px-3 py-2 sm:px-5"
     v-model="pageLengthCount"
     :options="{
       rowCount: options.rowCount,
diff --git a/frontend/src/components/ListViews/DealsListView.vue b/frontend/src/components/ListViews/DealsListView.vue
index 31a2d41d..7e4cf933 100644
--- a/frontend/src/components/ListViews/DealsListView.vue
+++ b/frontend/src/components/ListViews/DealsListView.vue
@@ -11,7 +11,7 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+    <ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
@@ -173,7 +173,7 @@
   </ListView>
   <ListFooter
     v-if="pageLengthCount"
-    class="border-t px-5 py-2"
+    class="border-t sm:px-5 px-3 py-2"
     v-model="pageLengthCount"
     :options="{
       rowCount: options.rowCount,
diff --git a/frontend/src/components/ListViews/EmailTemplatesListView.vue b/frontend/src/components/ListViews/EmailTemplatesListView.vue
index c089296c..88ada4a9 100644
--- a/frontend/src/components/ListViews/EmailTemplatesListView.vue
+++ b/frontend/src/components/ListViews/EmailTemplatesListView.vue
@@ -10,7 +10,7 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+    <ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
@@ -28,9 +28,8 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows id="list-rows">
+    <ListRows class="mx-3 sm:mx-5" id="list-rows">
       <ListRow
-        class="mx-5"
         v-for="row in rows"
         :key="row.name"
         v-slot="{ idx, column, item }"
@@ -129,7 +128,7 @@
     </ListSelectBanner>
   </ListView>
   <ListFooter
-    class="border-t px-5 py-2"
+    class="border-t sm:px-5 px-3 py-2"
     v-model="pageLengthCount"
     :options="{
       rowCount: options.rowCount,
diff --git a/frontend/src/components/ListViews/LeadsListView.vue b/frontend/src/components/ListViews/LeadsListView.vue
index 3c3e23e7..9c54362d 100644
--- a/frontend/src/components/ListViews/LeadsListView.vue
+++ b/frontend/src/components/ListViews/LeadsListView.vue
@@ -11,7 +11,7 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+    <ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
@@ -186,7 +186,7 @@
   </ListView>
   <ListFooter
     v-if="pageLengthCount"
-    class="border-t px-5 py-2"
+    class="border-t sm:px-5 px-3 py-2"
     v-model="pageLengthCount"
     :options="{
       rowCount: options.rowCount,
diff --git a/frontend/src/components/ListViews/ListRows.vue b/frontend/src/components/ListViews/ListRows.vue
index 0fead883..9bfdba17 100644
--- a/frontend/src/components/ListViews/ListRows.vue
+++ b/frontend/src/components/ListViews/ListRows.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-5 mt-2 h-full overflow-y-auto" v-if="showGroupedRows">
+  <div class="mx-3 mt-2 h-full overflow-y-auto sm:mx-5" v-if="showGroupedRows">
     <div v-for="group in reactivieRows" :key="group.group">
       <ListGroupHeader :group="group">
         <div
@@ -27,7 +27,7 @@
       </ListGroupRows>
     </div>
   </div>
-  <ListRows class="mx-5" v-else id="list-rows">
+  <ListRows class="mx-3 sm:mx-5" v-else id="list-rows">
     <ListRow
       v-for="row in reactivieRows"
       :key="row.name"
diff --git a/frontend/src/components/ListViews/OrganizationsListView.vue b/frontend/src/components/ListViews/OrganizationsListView.vue
index 0fb32563..7011fc65 100644
--- a/frontend/src/components/ListViews/OrganizationsListView.vue
+++ b/frontend/src/components/ListViews/OrganizationsListView.vue
@@ -13,7 +13,7 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+    <ListHeader class="sm:mx-5 mx-3" @columnWidthUpdated="emit('columnWidthUpdated')">
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
@@ -31,9 +31,8 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows id="list-rows">
+    <ListRows class="mx-3 sm:mx-5" id="list-rows">
       <ListRow
-        class="mx-5"
         v-for="row in rows"
         :key="row.name"
         v-slot="{ idx, column, item }"
@@ -122,7 +121,7 @@
     </ListSelectBanner>
   </ListView>
   <ListFooter
-    class="border-t px-5 py-2"
+    class="border-t sm:px-5 px-3 py-2"
     v-model="pageLengthCount"
     :options="{
       rowCount: options.rowCount,
diff --git a/frontend/src/components/ListViews/TasksListView.vue b/frontend/src/components/ListViews/TasksListView.vue
index 2273697f..e5d996a9 100644
--- a/frontend/src/components/ListViews/TasksListView.vue
+++ b/frontend/src/components/ListViews/TasksListView.vue
@@ -10,7 +10,10 @@
     }"
     row-key="name"
   >
-    <ListHeader class="mx-5" @columnWidthUpdated="emit('columnWidthUpdated')">
+    <ListHeader
+      class="mx-3 sm:mx-5"
+      @columnWidthUpdated="emit('columnWidthUpdated')"
+    >
       <ListHeaderItem
         v-for="column in columns"
         :key="column.key"
@@ -28,9 +31,8 @@
         </Button>
       </ListHeaderItem>
     </ListHeader>
-    <ListRows id="list-rows">
+    <ListRows class="mx-3 sm:mx-5" id="list-rows">
       <ListRow
-        class="mx-5"
         v-for="row in rows"
         :key="row.name"
         v-slot="{ idx, column, item }"
@@ -135,7 +137,7 @@
     </ListSelectBanner>
   </ListView>
   <ListFooter
-    class="border-t px-5 py-2"
+    class="border-t px-3 py-2 sm:px-5"
     v-model="pageLengthCount"
     :options="{
       rowCount: options.rowCount,
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index 2e534c3e..6c20a93a 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -1,9 +1,9 @@
 <template>
   <div
     v-if="isMobileView"
-    class="flex flex-col justify-between gap-2 px-5 py-4"
+    class="flex flex-col justify-between gap-2 sm:px-5 px-3 py-4"
   >
-    <div class="flex items-center justify-between gap-2">
+    <div class="flex items-center justify-between gap-2 overflow-x-auto">
       <div class="flex gap-2">
         <Dropdown :options="viewsDropdownOptions">
           <template #default="{ open }">
@@ -41,15 +41,14 @@
       </Button>
     </div>
     <div class="flex flex-col gap-2">
-      <div class="flex items-center justify-between gap-2">
-        <Filter
-          v-model="list"
-          :doctype="doctype"
-          :default_filters="filters"
-          @update="updateFilter"
-        />
-
+      <div class="flex items-center justify-between gap-2 overflow-x-auto">
         <div class="flex gap-2">
+          <Filter
+            v-model="list"
+            :doctype="doctype"
+            :default_filters="filters"
+            @update="updateFilter"
+          />
           <GroupBy
             v-if="route.params.viewType === 'group_by'"
             v-model="list"
@@ -57,6 +56,9 @@
             :hideLabel="isMobileView"
             @update="updateGroupBy"
           />
+        </div>
+
+        <div class="flex gap-2">
           <SortBy
             v-model="list"
             :doctype="doctype"
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
index 56824cd8..e01131c6 100644
--- a/frontend/src/pages/Notes.vue
+++ b/frontend/src/pages/Notes.vue
@@ -22,7 +22,7 @@
   <div class="flex-1 overflow-y-auto">
     <div
       v-if="notes.data?.data?.length"
-      class="grid sm:grid-cols-4 grid-cols-1 gap-4 px-5 pb-3"
+      class="grid grid-cols-1 gap-2 px-3 pb-2 sm:grid-cols-4 sm:gap-4 sm:px-5 sm:pb-3"
     >
       <div
         v-for="note in notes.data.data"
@@ -75,7 +75,7 @@
   </div>
   <ListFooter
     v-if="notes.data?.data?.length"
-    class="border-t px-5 py-2"
+    class="border-t px-3 py-2 sm:px-5"
     v-model="notes.data.page_length_count"
     :options="{
       rowCount: notes.data.row_count,