изменения long list

src/components/kit/KitLongList.vue

@@ -1,22 +1,22 @@
 <template lang="pug">
   base-input-container(:label="label")
-  .flex.container    
+    .relative    
-    base-input(type="text", v-model="value.label")
+      base-input(type="text", v-model="value.label")
-      template(#icon)
-        .icon(@click="isExpand = !isExpand")
-    .menu(v-if="isExpand")
-      base-input(
-        type="text", 
-        v-model="searchValue",
-        placeholder="Поиск...")
         template(#icon)
-          .icon1(@click="isExpand = !isExpand")
+          .icon(@click="isExpand = !isExpand")
-      .item.p-1.cursor-pointer(
+      .menu(v-if="isExpand")
-        v-for="item in items", 
+        base-input(
-        :key="item.id",
+          type="text", 
-        @click="pickValue(item)"
+          v-model="searchValue",
-      )
+          placeholder="Поиск...")
-        .text {{item.label}}
+          template(#icon)
+            .icon1(@click="isExpand = !isExpand")
+        .item.p-2.cursor-pointer(
+          v-for="item in items", 
+          :key="item.id",
+          @click="pickValue(item)"
+        )
+          .text {{item.label}}
 </template>
 
 <script>
@@ -73,18 +73,15 @@ export default {
   width: 20px
   height: 100%
 
-.icon1
-  background: url("../../assets/icons/down-arrow-1.svg") no-repeat 100% 50%
-  cursor: pointer
-  width: 20px
-  height: 100%
-  rotate: 180deg
 .menu
   background: #fff
   position: absolute
-  height: 200px
   z-index: 10
   border: 1.5px solid var(--border-light-grey-color)
-  border-radius: 4px
+  border-radius: 0 0 4px 4px
+  border-top: none
+  width: 100%
   .item
+    &:hover
+      background: var(--bg-hover-row-table)
 </style>