perf: card layout in each page

web/src/app/home/pipelines/components/pipeline-card/pipelineCard.module.css

@@ -1,5 +1,5 @@
 .cardContainer {
-    width: 24rem;
+    width: 100%;
     height: 10rem;
     background-color: #fff;
     border-radius: 10px;

web/src/app/home/pipelines/page.tsx

@@ -118,7 +118,7 @@ export default function PluginConfigPage() {
 
       <div className={styles.pipelineListContainer}>
         <CreateCardComponent
-          width={'24rem'}
+          width={'100%'}
           height={'10rem'}
           plusSize={'90px'}
           onClick={() => {

web/src/app/home/pipelines/pipelineConfig.module.css

@@ -1,8 +1,3 @@
-.formItemSubTitle {
-    font-size: 30px;
-    font-weight: bold;
-}
-
 .configPageContainer {
     width: 100%;
     height: 100%;
@@ -10,14 +5,12 @@
 
 
 .pipelineListContainer {
-    align-self: flex-start;
-    justify-self: flex-start;
-    width: calc(100%);
-    margin:  auto;
+    width: 100%;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
     display: grid;
-    grid-template-rows: repeat(auto-fill, minmax(10rem, 1fr));
     grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
     gap: 2rem;
-    justify-items: center;
-    align-items: center;
+    justify-items: stretch;
+    align-items: start;
 }