fix: listview layout

frontend/src/components/ListView.vue

@@ -3,7 +3,7 @@
     <div class="flex flex-col overflow-y-hidden w-max min-w-full">
       <div
         id="list-header"
-        class="flex space-x-4 items-center px-5 py-2 border-b"
+        class="flex space-x-4 items-center mx-5 mb-2 p-2 rounded bg-gray-100"
       >
         <Checkbox
           class="duration-300 cursor-pointer"
@@ -13,7 +13,7 @@
         <div
           v-for="column in columns"
           :key="column"
-          class="text-sm text-gray-600"
+          class="text-base text-gray-600"
           :class="[column.size, column.align]"
         >
           {{ column.label }}
@@ -24,7 +24,10 @@
           v-for="row in rows"
           :key="row[rowKey]"
           :to="$router.currentRoute.value.path + '/' + row[rowKey]"
-          class="flex space-x-4 items-center mx-2 px-3 py-2 border-b cursor-pointer transition-all duration-300 ease-in-out"
+          class="flex flex-col mx-5 cursor-pointer transition-all duration-300 ease-in-out"
+        >
+          <div
+            class="flex space-x-4 items-center px-2 py-2.5 rounded"
             :class="
               selections.has(row[rowKey])
                 ? 'bg-gray-100 hover:bg-gray-200'
@@ -92,6 +95,8 @@
                 </div>
               </ListRowItem>
             </div>
+          </div>
+          <div class="mx-2 h-px border-t border-gray-200"></div>
         </router-link>
       </div>
       <transition

frontend/src/pages/CallLogs.vue

@@ -4,7 +4,7 @@
       <Breadcrumbs :items="[{ label: list.title }]" />
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Button label="Sort">
         <template #prefix><SortIcon class="h-4" /></template>

frontend/src/pages/Contacts.vue

@@ -9,7 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5 border-b">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">

frontend/src/pages/Deals.vue

@@ -9,7 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">

frontend/src/pages/Leads.vue

@@ -9,7 +9,7 @@
       </Button>
     </template>
   </LayoutHeader>
-  <div class="flex justify-between items-center px-5 pb-2.5">
+  <div class="flex justify-between items-center px-5 pt-3 pb-4">
     <div class="flex items-center gap-2">
       <Dropdown :options="viewsDropdownOptions">
         <template #default="{ open }">