fix

Author: lucasgoral

src/components/ControlPlanes/ControlPlaneCard/ControlPlaneCard.module.css

@@ -1,6 +1,5 @@
 .card {
-  margin: 0.75rem 0.75rem 0.75rem 0;
-  min-width: min-content;
+  margin: 0;
 }
 
 .container {

src/components/ControlPlanes/List/ControlPlaneListWorkspaceGridTile.tsx

@@ -161,16 +161,18 @@ export function ControlPlaneListWorkspaceGridTile({ projectName, workspace }: Pr
               }
             />
           ) : (
-            <FlexBox wrap={'Wrap'} gap={'1rem'}>
-              {controlplanes?.map((cp) => (
-                <ControlPlaneCard
-                  key={`${cp.metadata.name}--${cp.metadata.namespace}`}
-                  controlPlane={cp}
-                  projectName={projectName}
-                  workspace={workspace}
-                />
-              ))}
-            </FlexBox>
+            <div className={styles.wrapper}>
+              <div className={styles.grid}>
+                {controlplanes?.map((cp) => (
+                  <ControlPlaneCard
+                    key={`${cp.metadata.name}--${cp.metadata.namespace}`}
+                    controlPlane={cp}
+                    projectName={projectName}
+                    workspace={workspace}
+                  />
+                ))}
+              </div>
+            </div>
           )}
         </Panel>
       </ObjectPageSection>

src/components/ControlPlanes/List/WorkspacesList.module.css

@@ -1,3 +1,20 @@
 .createButton {
   margin-bottom: 2rem;
 }
+
+.wrapper {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  @container (width > 768px) {
+    grid-template-columns: 1fr 1fr;
+  }
+  @container (width > 1024px) {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}