From 1c25e29999e28dac07eb3075e0c61b64fdee3f46 Mon Sep 17 00:00:00 2001
From: t0ng7u <dev@aiass.cc>
Date: Thu, 24 Jul 2025 17:44:48 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20fix(ui):=20adjust=20responsive?=
 =?UTF-8?q?=20breakpoints=20for=20pricing=20card=20grid=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Optimize grid column breakpoints to account for 460px sidebar width:
- Change from sm:grid-cols-2 lg:grid-cols-3 to xl:grid-cols-2 2xl:grid-cols-3
- Ensures adequate space for card display after subtracting sidebar width
- Improves layout on medium-sized screens where previous breakpoints caused cramped display

Breakpoint calculation:
- 1280px screen - 460px sidebar = 820px → 2 columns
- 1536px screen - 460px sidebar = 1076px → 3 columns
---
 .../table/model-pricing/view/card/PricingCardView.jsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
index b1868cee..29e1786a 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
@@ -203,7 +203,7 @@ const PricingCardView = ({
 
   return (
     <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">
         {paginatedModels.map((model, index) => {
           const modelKey = getModelKey(model);
           const isSelected = selectedRowKeys.includes(modelKey);