From 1ccc728e5d619debd6e26fb23c98edc2378796ca Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Mon, 4 Aug 2025 22:03:12 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20fix(pricing-card):=20align=20ske?=
 =?UTF-8?q?leton=20responsive=20grid=20with=20actual=20card=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Update PricingCardSkeleton grid classes from 'sm:grid-cols-2 lg:grid-cols-3'
  to 'xl:grid-cols-2 2xl:grid-cols-3' to match PricingCardView layout
- Ensures consistent column count between skeleton and actual content
  at same screen sizes
- Improves loading state visual consistency across different breakpoints
---
 .../table/model-pricing/view/card/PricingCardSkeleton.jsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx b/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
index 13eb5ecc..43535fee 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
@@ -27,7 +27,7 @@ const PricingCardSkeleton = ({
 }) => {
   const placeholder = (
     <div className="p-4">
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+      <div className="grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4">
         {Array.from({ length: skeletonCount }).map((_, index) => (
           <Card
             key={index}