fix: item not center ui

web/app/(commonLayout)/remark-directive-test/page.tsx

@@ -10,8 +10,8 @@ We’re speaking with technical teams to better understand:
 
 ::::withIconCardList
 
-:::withIconCardItem {icon="https://assets.dify.ai/images/dify-swag.png"}
-Dify swag
+:::withIconCardItem {icon="https://assets.dify.ai/images/gift-card.png"}
+$100 Amazon gift card
 :::
 
 :::withIconCardItem {icon="https://assets.dify.ai/images/dify-swag.png"}

web/app/components/base/markdown-with-directive/components/with-icon-card-item.tsx

@@ -10,7 +10,9 @@ function WithIconCardItem({ icon, children }: WithIconItemProps) {
   return (
     <div className="flex h-11 items-center space-x-3 rounded-lg bg-background-section px-2">
       <Image src={icon} className="!border-none object-contain" alt="icon" width={40} height={40} />
-      <div className="flex w-0 grow items-center truncate text-text-secondary system-sm-medium">{children}</div>
+      <div className="w-0 grow text-text-secondary system-sm-medium [&_p]:!mb-0 [&_p]:flex [&_p]:h-11 [&_p]:w-full [&_p]:items-center [&_p]:truncate">
+        {children}
+      </div>
     </div>
   )
 }

web/app/components/base/markdown-with-directive/components/with-icon-card-list.tsx

@@ -8,7 +8,7 @@ type WithIconListProps = WithIconCardListProps & {
 
 function WithIconList({ children, className }: WithIconListProps) {
   return (
-    <div className={cn('space-y-2 p-4', className)}>
+    <div className={cn('space-y-1', className)}>
       {children}
     </div>
   )