fix: FwbCard component width issue

Fixes issue #383

Author: Sqrcz

docs/components/card.md

@@ -20,7 +20,7 @@ Use these responsive card components to show data entries and information to you
 <fwb-card-example />
 ```vue
 <template>
-    <fwb-card href="#">
+    <fwb-card href="#" class="w-sm">
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
           Noteworthy technology acquisitions 2021
@@ -46,6 +46,7 @@ import { FwbCard } from 'flowbite-vue'
       img-alt="Desk"
       img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
       variant="image"
+      class="w-md"
     >
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
@@ -72,6 +73,7 @@ import { FwbCard } from 'flowbite-vue'
       img-alt="Desk"
       img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
       variant="horizontal"
+      class="w-lg"
     >
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">

docs/components/card/examples/FwbCardExample.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw inline-flex flex-wrap gap-2">
-    <fwb-card href="#">
+    <fwb-card href="#" class="w-sm">
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
           Noteworthy technology acquisitions 2021

docs/components/card/examples/FwbCardExampleHorizontal.vue

@@ -4,6 +4,7 @@
       img-alt="Desk"
       img-src="https://flowbite.com/docs/images/blog/image-4.jpg"
       variant="horizontal"
+      class="w-lg"
     >
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">

docs/components/card/examples/FwbCardExampleImage.vue

@@ -4,6 +4,7 @@
       img-alt="Desk"
       img-src="https://flowbite.com/docs/images/blog/image-1.jpg"
       variant="image"
+      class="w-md"
     >
       <div class="p-5">
         <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">

src/components/FwbCard/composables/useCardClasses.ts

@@ -16,11 +16,11 @@ export function useCardsClasses (props: UseCardsClassesProps): {
     let computedClasses = ''
 
     if (props.variant.value === 'image') {
-      computedClasses = 'max-w-sm rounded-lg border border-gray-200 shadow-md dark:border-gray-700'
+      computedClasses = 'min-w-sm rounded-lg border border-gray-200 shadow-md dark:border-gray-700'
     } else if (props.variant.value === 'default') {
-      computedClasses = 'block max-w-sm rounded-lg border border-gray-200 shadow-md dark:border-gray-700'
+      computedClasses = 'block min-w-sm rounded-lg border border-gray-200 shadow-md dark:border-gray-700 '
     } else if (props.variant.value === 'horizontal') {
-      computedClasses = 'flex flex-col items-center rounded-lg border shadow-md md:flex-row md:max-w-xl dark:border-gray-700'
+      computedClasses = 'flex flex-col items-center rounded-lg border shadow-md md:flex-row md:min-w-xl dark:border-gray-700'
     }
 
     if (!props.class?.value || (!props.class.value.includes('bg-'))) {