fix: update grids to dynamically adapt number of columns + aligned rows

2024-07-12 13:52:24 +02:00
parent 84f9668454
commit b67c4c7684
3 changed files with 6 additions and 3 deletions
--- a/components/MyPages/Blocks/Overview/Stats/Points/Container/container.module.css
+++ b/components/MyPages/Blocks/Overview/Stats/Points/Container/container.module.css
@@ -6,8 +6,7 @@

@media screen and (min-width: 768px) {
  .points {
-    grid-template-rows: auto auto auto;
-    grid-template-columns: 1fr 1fr;
+    grid-auto-flow: column;
    row-gap: 0;
    column-gap: var(--Spacing-x2);
  }
--- a/components/MyPages/Blocks/Overview/Stats/Points/PointsColumn/index.tsx
+++ b/components/MyPages/Blocks/Overview/Stats/Points/PointsColumn/index.tsx
@@ -57,7 +57,7 @@ async function PointsColumn({
  const { formatMessage } = await getIntl()

  return (
-    <article>
+    <article className={styles.article}>
      <Body
        color="white"
        textTransform="bold"
--- a/components/MyPages/Blocks/Overview/Stats/Points/PointsColumn/pointsColumn.module.css
+++ b/components/MyPages/Blocks/Overview/Stats/Points/PointsColumn/pointsColumn.module.css
@@ -2,4 +2,8 @@
  .firstRow {
    align-content: flex-end;
  }
+
+  .article {
+    display: grid;
+  }
 }