fix(card): card was not responsive

Author: MGREMY

apps/storybook/src/card.component.stories.ts

@@ -177,7 +177,7 @@ export const CardOrientationStory: StoryObj<StoryType> = {
     props: args,
     template: `
       <div flowbiteCard ${argsToTemplate(args)}>
-        <img class="rounded-t-lg h-96 object-cover" src="images/image-2.jpg" alt="" />
+        <img class="rounded-l-lg max-w-24 md:max-w-48 object-cover" src="images/image-2.jpg" alt="" />
         <div flowbiteCardContent>
           <h5 flowbiteCardHeader>Noteworthy technology acquisitions 2021</h5>
           <p class="mb-3">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>

libs/flowbite-angular/card/src/card-content/theme.ts

@@ -44,11 +44,11 @@ export const flowbiteCardContentTheme: FlowbiteCardContentTheme = createTheme({
       },
     },
     size: {
-      xs: 'w-xs',
-      sm: 'w-sm',
-      md: 'w-md',
-      lg: 'w-lg',
-      xl: 'w-xl',
+      xs: 'max-w-xs',
+      sm: 'max-w-sm',
+      md: 'max-w-md',
+      lg: 'max-w-lg',
+      xl: 'max-w-xl',
     },
   },
 });

libs/flowbite-angular/card/src/card/theme.ts

@@ -62,11 +62,11 @@ export const flowbiteCardTheme: FlowbiteCardTheme = createTheme({
       },
     },
     size: {
-      xs: 'w-xs',
-      sm: 'w-sm',
-      md: 'w-md',
-      lg: 'w-lg',
-      xl: 'w-xl',
+      xs: 'max-w-xs',
+      sm: 'max-w-sm',
+      md: 'max-w-md',
+      lg: 'max-w-lg',
+      xl: 'max-w-xl',
     },
   },
 });