From 78690c93b3d0c5268ceff1acc96f45a8e559c394 Mon Sep 17 00:00:00 2001
From: Zhaoxinxin <107842350+Liam-Zhao@users.noreply.github.com>
Date: Wed, 10 Jul 2024 20:00:45 +0800
Subject: [PATCH] fix: cluster card layout (#378)

Signed-off-by: zhaoxinxin <1186037180@qq.com>
---
 src/components/clusters/index.module.css | 99 ++++++++++++++++++++++++
 src/components/clusters/index.tsx        | 19 +----
 2 files changed, 100 insertions(+), 18 deletions(-)

diff --git a/src/components/clusters/index.module.css b/src/components/clusters/index.module.css
index ef4cf130..2ceff4f0 100644
--- a/src/components/clusters/index.module.css
+++ b/src/components/clusters/index.module.css
@@ -128,3 +128,102 @@
 .buttonContent {
   padding: 0;
 }
+
+.clusterCard {
+  width: 20%;
+  padding-right: 1rem;
+  padding-bottom: 1rem;
+}
+
+.clusterCard:nth-of-type(5n) {
+  padding-right: 0;
+}
+
+@media screen and (max-width: 2560px) {
+  .clusterCard {
+    width: 20%;
+  }
+
+  .clusterCard:nth-of-type(3n) {
+    padding-right: 1rem;
+  }
+
+  .clusterCard:nth-of-type(4n) {
+    padding-right: 1rem;
+  }
+
+  .clusterCard:nth-of-type(5n) {
+    padding-right: 0;
+  }
+}
+
+@media screen and (max-width: 2048px) {
+  .clusterCard {
+    width: 25%;
+  }
+
+  .clusterCard:nth-of-type(3n) {
+    padding-right: 1rem;
+  }
+
+  .clusterCard:nth-of-type(4n) {
+    padding-right: 0;
+  }
+
+  .clusterCard:nth-of-type(5n) {
+    padding-right: 1rem;
+  }
+}
+
+@media screen and (max-width: 1920px) {
+  .clusterCard {
+    width: 25%;
+  }
+
+  .clusterCard:nth-of-type(3n) {
+    padding-right: 1rem;
+  }
+
+  .clusterCard:nth-of-type(4n) {
+    padding-right: 0;
+  }
+
+  .clusterCard:nth-of-type(5n) {
+    padding-right: 1rem;
+  }
+}
+
+@media screen and (max-width: 1600px) {
+  .clusterCard {
+    width: 33.3333%;
+  }
+
+  .clusterCard:nth-of-type(3n) {
+    padding-right: 0;
+  }
+
+  .clusterCard:nth-of-type(4n) {
+    padding-right: 1rem;
+  }
+  .clusterCard:nth-of-type(5n) {
+    padding-right: 1rem;
+  }
+}
+
+@media screen and (max-width: 1440px) {
+  .clusterCard {
+    width: 33.3333%;
+  }
+
+  .clusterCard:nth-of-type(3n) {
+    padding-right: 0;
+  }
+
+  .clusterCard:nth-of-type(4n) {
+    padding-right: 1rem;
+  }
+
+  .clusterCard:nth-of-type(5n) {
+    padding-right: 1rem;
+  }
+}
diff --git a/src/components/clusters/index.tsx b/src/components/clusters/index.tsx
index a2f9df64..8a7de964 100644
--- a/src/components/clusters/index.tsx
+++ b/src/components/clusters/index.tsx
@@ -339,24 +339,7 @@ export default function Clusters() {
             <></>
           ) : (
             allClusters.map((item) => (
-              <Box
-                key={item.id}
-                id="clusters"
-                sx={{
-                  maxWidth: '28rem',
-                  width: '33.333%',
-                  pr: '1rem',
-                  pb: '1rem',
-                  ':nth-of-type(3n)': {
-                    pr: '0rem ',
-                  },
-                  [theme.breakpoints.up('xl')]: {
-                    ':nth-of-type(3n)': {
-                      pr: '1rem !important',
-                    },
-                  },
-                }}
-              >
+              <Box key={item.id} id="clusters" className={styles.clusterCard}>
                 <Paper variant="outlined">
                   <Box className={styles.clusterListContent}>
                     <Box display="flex">