From bb471ee4efb18f72a5f383358546959a57da026f Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 25 Jul 2023 11:33:20 +0530
Subject: [PATCH] fix: added vertical and horizontal scroll in listview

---
 frontend/src/components/AppSidebar.vue    | 44 +++++++++----------
 frontend/src/components/DesktopLayout.vue |  6 +--
 frontend/src/components/ListView.vue      | 52 ++++++++++++-----------
 3 files changed, 51 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/AppSidebar.vue b/frontend/src/components/AppSidebar.vue
index 88664c70..4e0d91f4 100644
--- a/frontend/src/components/AppSidebar.vue
+++ b/frontend/src/components/AppSidebar.vue
@@ -1,27 +1,25 @@
 <template>
-  <div class="inline-flex h-full flex-col border-r w-[220px]">
-    <div class="flex p-2">
-      <UserDropdown />
-    </div>
-    <div class="flex-1">
-      <nav class="space-y-0.5 px-2">
-        <NavLinks
-          :links="navigations"
-          class="flex items-center rounded px-2 py-1 text-gray-800 transition-all duration-300 ease-in-out"
-          active="bg-gray-100 hover:bg-gray-200"
-          inactive="hover:bg-gray-50"
-        >
-          <template v-slot="{ link }">
-            <div class="flex w-full items-center space-x-2">
-              <span class="grid h-5 w-6 place-items-center">
-                <component :is="link.icon" class="h-4.5 w-4.5 text-gray-700" />
-              </span>
-              <span class="text-base">{{ link.name }}</span>
-            </div>
-          </template>
-        </NavLinks>
-      </nav>
-    </div>
+  <div class="flex p-2">
+    <UserDropdown />
+  </div>
+  <div class="flex-1">
+    <nav class="space-y-0.5 px-2">
+      <NavLinks
+        :links="navigations"
+        class="flex items-center rounded px-2 py-1 text-gray-800 transition-all duration-300 ease-in-out"
+        active="bg-gray-100 hover:bg-gray-200"
+        inactive="hover:bg-gray-50"
+      >
+        <template v-slot="{ link }">
+          <div class="flex w-full items-center space-x-2">
+            <span class="grid h-5 w-6 place-items-center">
+              <component :is="link.icon" class="h-4.5 w-4.5 text-gray-700" />
+            </span>
+            <span class="text-base">{{ link.name }}</span>
+          </div>
+        </template>
+      </NavLinks>
+    </nav>
   </div>
 </template>
 
diff --git a/frontend/src/components/DesktopLayout.vue b/frontend/src/components/DesktopLayout.vue
index 4d4d9e0a..8e7068c6 100644
--- a/frontend/src/components/DesktopLayout.vue
+++ b/frontend/src/components/DesktopLayout.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex h-full">
-    <div>
+  <div class="flex h-screen w-screen">
+    <div class="h-full border-r w-[220px]">
       <AppSidebar />
     </div>
-    <div class="w-full">
+    <div class="flex-1 flex flex-col h-full overflow-auto">
       <slot />
     </div>
   </div>
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index fd35d18d..cbe3de34 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -37,35 +37,37 @@
       <Button icon="more-horizontal" />
     </div>
   </div>
-  <div id="content" class="">
-    <div
-      id="list-header"
-      class="flex space-x-2 items-center px-5 py-2 border-b"
-    >
-      <Checkbox class="mr-2" />
+  <div id="content" class="flex flex-col w-full overflow-x-auto flex-1">
+    <div class="flex flex-col overflow-y-hidden w-max min-w-full">
       <div
-        v-for="column in columns"
-        :key="column"
-        class="text-sm text-gray-600"
-        :class="[column.size, column.align]"
+        id="list-header"
+        class="flex space-x-4 items-center px-5 py-2 border-b"
       >
-        {{ column.label }}
-      </div>
-    </div>
-    <div id="list-rows">
-      <div
-        v-for="row in rows"
-        :key="row"
-        class="flex space-x-2 items-center mx-2 px-3 py-2 border-b"
-      >
-        <Checkbox class="mr-2" />
+        <Checkbox class="" />
         <div
           v-for="column in columns"
-          :key="column.key"
-          class="text-base text-gray-900"
+          :key="column"
+          class="text-sm text-gray-600"
           :class="[column.size, column.align]"
         >
-          {{ row[column.key] }}
+          {{ column.label }}
+        </div>
+      </div>
+      <div id="list-rows" class="h-full overflow-y-auto">
+        <div
+          v-for="row in rows"
+          :key="row"
+          class="flex space-x-4 items-center mx-2 px-3 py-2 border-b"
+        >
+          <Checkbox class="" />
+          <div
+            v-for="column in columns"
+            :key="column.key"
+            class="text-base text-gray-900"
+            :class="[column.size, column.align]"
+          >
+            {{ row[column.key] }}
+          </div>
         </div>
       </div>
     </div>
@@ -84,11 +86,11 @@ const props = defineProps({
   },
   columns: {
     type: Array,
-    default: []
+    default: [],
   },
   rows: {
     type: Array,
-    default: []
+    default: [],
   },
 })