fix: description in safari & mobile

Author: alexiscolin

src/components/faucet/FaucetCard.vue

@@ -3,10 +3,12 @@
     <div class="flex flex-col justify-between h-full min-h-64">
       <FaucetAvailability :available="true" class="self-end" />
       <!-- <div class="group-hover:-translate-y-0 translate-y-[calc(theme(spacing.12)_+_theme(spacing.7))] mt-28 ease-in-out duration-500"> -->
-      <div class="">
+      <div class="mt-12">
         <span class="mb-2 text-grey-100 text-50 uppercase">{{ faucet.chain_id }}</span>
         <h2 class="text-500 text-grey-50">{{ faucet.name }}</h2>
-        <h3 class="text-grey-100 text-100 mt-3 h-12 group-hover:max-h-12 group-hover:opacity-100 max-h-0 opacity-0 ease-in-out duration-700 bottom-0 line-clamp-3">{{ faucet.description }}</h3>
+        <h3 class="text-grey-100 text-100 mt-3 h-12 group-hover:max-h-12 md:max-h-0 ease-in-out duration-700 line-clamp-4 md:line-clamp-3 will-change-[max-height]">
+          {{ faucet.description }}
+        </h3>
       </div>
     </div>
   </Card>

src/components/ui/Card.vue

@@ -1,7 +1,7 @@
 <template>
-  <article ref="DOMcard" v-bind="$attrs" class="card-container flex h-full flex-col cursor-pointer before:block before:absolute before:top-0 before:left-0 before:h-full before:w-full before:rounded before:blur-xl before:will-change-transform">
+  <article ref="DOMcard" v-bind="$attrs" class="card-container group flex h-full flex-col cursor-pointer before:block before:absolute before:pointer-events-none before:top-0 before:left-0 before:h-full before:w-full before:rounded before:blur-xl before:will-change-transform">
     <div
-      class="card-inner group relative h-full shadow-card will-change-transform after:block after:absolute after:rounded after:top-px after:left-px after:h-[calc(100%-2px)] after:w-[calc(100%-2px)] after:z-99 after:mix-blend-overlay after:brightness-90 after:contrast-75 after:transition-opacity after:duration-500 before:absolute before:w-[calc(100%+2px)] before:h-[calc(100%+2px)] before:-top-px before:-left-px before:rounded ease-in-out after:z-20"
+      class="card-inner relative h-full shadow-card will-change-transform after:block after:absolute after:rounded after:pointer-events-none after:top-px after:left-px after:h-[calc(100%-2px)] after:w-[calc(100%-2px)] after:z-99 after:mix-blend-overlay after:brightness-90 after:contrast-75 after:transition-opacity after:duration-500 before:absolute before:w-[calc(100%+2px)] before:h-[calc(100%+2px)] before:-top-px before:-left-px before:rounded ease-in-out after:z-20"
     >
       <div class="card relative flex flex-col bg-grey-500 rounded px-6 py-8 p-2 h-full">
         <slot></slot>