From 7bf6c89cb4b80e79af85c4e46f30402f68e80ad5 Mon Sep 17 00:00:00 2001
From: Benny Samir Hierl <bennysamir@posteo.de>
Date: Sun, 20 Feb 2022 12:09:25 +0100
Subject: [PATCH] fix styles

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>
---
 src/components/FormWishlistItem.vue |  2 +-
 src/views/DetailView.vue            | 14 +++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/FormWishlistItem.vue b/src/components/FormWishlistItem.vue
index b0c7c88..c5e3d7c 100644
--- a/src/components/FormWishlistItem.vue
+++ b/src/components/FormWishlistItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex h-fit flex-col space-x-0 overflow-hidden rounded-md border-2 border-stone-200 dark:border-stone-700 sm:flex-row sm:space-x-2"
+    class="flex h-fit flex-col space-x-0 space-y-6 overflow-hidden sm:flex-row sm:space-x-2 sm:space-y-0"
   >
     <ImagePreview
       class="max-h-44 flex-shrink-0 flex-grow-0 object-cover sm:w-1/4"
diff --git a/src/views/DetailView.vue b/src/views/DetailView.vue
index ce23ba2..b5375d1 100644
--- a/src/views/DetailView.vue
+++ b/src/views/DetailView.vue
@@ -145,9 +145,17 @@ const handleDeleteItem = async (item: WishlistItemType): Promise<void> => {
       </div>
     </div>
 
-    <div v-else class="flex flex-col space-y-14 py-10 md:space-y-8">
-      <FormWishlistItem v-if="editModeIsActive" @create="handleCreateItem" />
-      <div v-for="item in filteredItems" :key="item.id">
+    <div
+      v-else
+      class="flex flex-col py-10"
+      :class="{ 'divide-y-2': editModeIsActive }"
+    >
+      <FormWishlistItem
+        v-if="editModeIsActive"
+        @create="handleCreateItem"
+        class="py-8 md:py-14"
+      />
+      <div v-for="item in filteredItems" :key="item.id" class="py-8 md:py-14">
         <WishlistItem
           v-if="!editModeIsActive"
           :item="item"