fix: added vertical and horizontal scroll in listview

frontend/src/components/AppSidebar.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="inline-flex h-full flex-col border-r w-[220px]">
   <div class="flex p-2">
     <UserDropdown />
   </div>
@@ -22,7 +21,6 @@
       </NavLinks>
     </nav>
   </div>
-  </div>
 </template>
 
 <script setup>

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>

frontend/src/components/ListView.vue

@@ -37,12 +37,13 @@
       <Button icon="more-horizontal" />
     </div>
   </div>
-  <div id="content" class="">
+  <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
         id="list-header"
-      class="flex space-x-2 items-center px-5 py-2 border-b"
+        class="flex space-x-4 items-center px-5 py-2 border-b"
       >
-      <Checkbox class="mr-2" />
+        <Checkbox class="" />
         <div
           v-for="column in columns"
           :key="column"
@@ -52,13 +53,13 @@
           {{ column.label }}
         </div>
       </div>
-    <div id="list-rows">
+      <div id="list-rows" class="h-full overflow-y-auto">
         <div
           v-for="row in rows"
           :key="row"
-        class="flex space-x-2 items-center mx-2 px-3 py-2 border-b"
+          class="flex space-x-4 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"
@@ -70,6 +71,7 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script setup>
 import { FeatherIcon, Dropdown, Checkbox } from 'frappe-ui'
@@ -84,11 +86,11 @@ const props = defineProps({
   },
   columns: {
     type: Array,
-    default: []
+    default: [],
   },
   rows: {
     type: Array,
-    default: []
+    default: [],
   },
 })