fix overlapping description issue

Signed-off-by: Benny Samir Hierl <bennysamir@posteo.de>

package.json

@@ -19,6 +19,7 @@
   },
   "dependencies": {
     "@prisma/client": "^3.8.1",
+    "@tailwindcss/line-clamp": "^0.3.1",
     "axios": "^0.25.0",
     "fastify": "^3.27.0",
     "fastify-compress": "^4.0.1",

src/api/config/schemas/wishlist.ts

@@ -19,7 +19,7 @@ export const wishlistItemResponseSchema = {
     title: { type: 'string' },
     url: { type: 'string' },
     imageSrc: { type: 'string' },
-    description: { type: 'string' },
+    description: { type: 'string', maxLength: 300 },
     comment: { type: 'string' },
     bought: { type: 'boolean' },
     wishlistId: { type: 'string' },

src/components/WishlistItem.vue

@@ -34,7 +34,17 @@ const { t } = useI18n()
     <div class="flex flex-col p-2 justify-between">
       <div>
         <h1 class="text-lg mb-1 font-bold">{{ title }}</h1>
-        <p class="text-sm">{{ description }}</p>
+        <p class="text-sm sm:line-clamp-3">
+          {{ description }}
+        </p>
+      </div>
+      <div class="flex flex-row items-baseline space-x-2">
+        <BaseButton
+          class="mt-4 sm:mt-2 text-xs"
+          :icon="IconCart"
+          @click="$emit('bought')"
+          >{{ t('components.wishlist-item.bought-button.text') }}</BaseButton
+        >
         <a
           v-if="url"
           :href="url"
@@ -48,12 +58,6 @@ const { t } = useI18n()
           }}</span>
         </a>
       </div>
-      <BaseButton
-        class="mt-4 sm:mt-2 text-xs"
-        :icon="IconCart"
-        @click="$emit('bought')"
-        >{{ t('components.wishlist-item.bought-button.text') }}</BaseButton
-      >
     </div>
   </div>
 </template>

tailwind.config.js

@@ -1,8 +1,8 @@
-// eslint-disable-next-line no-undef
+/* eslint-disable no-undef */
 module.exports = {
   content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [require('@tailwindcss/line-clamp')],
 }