From 1ff9cfb03b43fc49d9ecad2b38b2958367b038ea Mon Sep 17 00:00:00 2001
From: Karolina Kosiorowska <karolina.kosiorowska@thesis.co>
Date: Fri, 8 Dec 2023 09:27:31 +0100
Subject: [PATCH] Use a `templateAreas` for grid

---
 dapp/src/components/Overview/index.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/dapp/src/components/Overview/index.tsx b/dapp/src/components/Overview/index.tsx
index 38f7d0068..6a4810a84 100644
--- a/dapp/src/components/Overview/index.tsx
+++ b/dapp/src/components/Overview/index.tsx
@@ -26,18 +26,20 @@ export default function Overview() {
         </Button>
       </Flex>
       <Grid
+        templateAreas={`"position-details statistics"
+                        "transaction-history transaction-history"`}
+        gridTemplateColumns={{ base: "30% 1fr", xl: "20% 1fr" }}
+        gridTemplateRows={{ base: "55% 1fr", xl: "40% 1fr" }}
         h="80vh"
-        templateRows="repeat(12, 1fr)"
-        templateColumns="repeat(12, 1fr)"
         gap={4}
       >
-        <GridItem colSpan={3} rowSpan={5} bg={bg}>
+        <GridItem bg={bg} area="position-details">
           <PositionDetails />
         </GridItem>
-        <GridItem colSpan={9} rowSpan={5} bg={bg}>
+        <GridItem bg={bg} area="statistics">
           <Statistics />
         </GridItem>
-        <GridItem colSpan={12} rowSpan={7} bg={bg}>
+        <GridItem bg={bg} area="transaction-history">
           <TransactionHistory />
         </GridItem>
       </Grid>