From 50054e18388515dab3ce2ed9f0b31dfbb137b99e Mon Sep 17 00:00:00 2001
From: Matias Benary <matiasbenary@gmail.com>
Date: Tue, 15 Oct 2024 14:16:48 -0300
Subject: [PATCH] fix: styles issue on home page for Safari 17

---
 src/components/home/Contracts/index.tsx         | 4 ++--
 src/components/home/DecentralizedApps/index.tsx | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/home/Contracts/index.tsx b/src/components/home/Contracts/index.tsx
index ab15b5ede..92c1a84af 100644
--- a/src/components/home/Contracts/index.tsx
+++ b/src/components/home/Contracts/index.tsx
@@ -87,7 +87,7 @@ export const Contracts = () => {
         gap="xl"
         columnsPhone="minmax(0, 1fr)"
         columnsTablet="minmax(0, 1fr)"
-        style={{ flexGrow: 1 }}
+        style={{ height: '88%' }}
       >
         <Flex stack justify="space-between">
           <Flex stack gap="m">
@@ -119,7 +119,7 @@ export const Contracts = () => {
         </Flex>
 
         <Tabs.Root value={language}>
-          <Flex stack justify="space-between" style={{ flexGrow: 1 }}>
+          <Flex stack justify="space-between" style={{ height: '100%' }}>
             <Tabs.Content value="js">
               <Title> One Command Setup </Title>
               <Code code={`npx create-near-app@latest`} language="bash" />
diff --git a/src/components/home/DecentralizedApps/index.tsx b/src/components/home/DecentralizedApps/index.tsx
index 631892092..7f377d45c 100644
--- a/src/components/home/DecentralizedApps/index.tsx
+++ b/src/components/home/DecentralizedApps/index.tsx
@@ -67,6 +67,7 @@ const Carousel = styled.div`
 const WalletImg = styled(Image)`
   margin: 0 2px;
   height: 40px;
+  width: 40px;
   border-radius: 4px;
 `;
 
@@ -80,7 +81,7 @@ export const DecentralizedApps = () => {
         gapTablet="xl"
         columnsPhone="minmax(0, 1fr)"
         columnsTablet="minmax(0, 1fr)"
-        style={{ flex: 1 }}
+        style={{ height: '88%' }}
       >
         <Flex stack justify="space-between">
           <Flex stack gap="m">
@@ -97,7 +98,7 @@ export const DecentralizedApps = () => {
           </Flex>
         </Flex>
 
-        <Flex stack gap="m" justify="space-between" style={{ flexGrow: 1 }}>
+        <Flex stack gap="m" justify="space-between" style={{ height: '100%' }}>
           <Flex stack>
             <Title> NEAR React App </Title>
             <Code code={ReactApp} height={450} language="ts" />