From ad4713899482351fa4586a643fe1184452f687e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakub=20Von=C3=A1=C5=A1ek?= <vonasek.jakub@gmail.com>
Date: Thu, 20 Jun 2024 11:19:00 +0200
Subject: [PATCH] fix RPC layout

---
 src/components/Layout/Page/Page.styled.ts     |  7 ++--
 .../ProviderSelectButton.styled.ts            | 36 +++++++++++--------
 .../ProviderSelectButton.tsx                  |  6 ++--
 3 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/components/Layout/Page/Page.styled.ts b/src/components/Layout/Page/Page.styled.ts
index 1edc4d6f8..329cf2b0d 100644
--- a/src/components/Layout/Page/Page.styled.ts
+++ b/src/components/Layout/Page/Page.styled.ts
@@ -11,7 +11,7 @@ export const SPage = styled.div`
   display: flex;
   flex-direction: column;
 
-  height: 100vh;
+  min-height: 100vh;
 
   background: ${theme.colors.bg};
 
@@ -19,6 +19,8 @@ export const SPage = styled.div`
     --nav-height: 70px;
 
     overflow-y: auto;
+
+    height: 100vh;
   }
 `
 
@@ -40,8 +42,6 @@ export const SPageContent = styled.main`
   flex-direction: column;
   flex-grow: 1;
 
-  padding-bottom: var(--mobile-nav-height);
-
   ::-webkit-scrollbar {
     width: 0px;
   }
@@ -52,7 +52,6 @@ export const SPageContent = styled.main`
 
   @media ${theme.viewport.gte.sm} {
     padding: 0 20px;
-    padding-bottom: var(--mobile-nav-height);
 
     display: block;
 
diff --git a/src/sections/provider/components/ProviderSelectButton/ProviderSelectButton.styled.ts b/src/sections/provider/components/ProviderSelectButton/ProviderSelectButton.styled.ts
index 99986139e..57328205d 100644
--- a/src/sections/provider/components/ProviderSelectButton/ProviderSelectButton.styled.ts
+++ b/src/sections/provider/components/ProviderSelectButton/ProviderSelectButton.styled.ts
@@ -2,7 +2,7 @@ import styled from "@emotion/styled"
 import { motion } from "framer-motion"
 import { theme } from "theme"
 
-export const SButton = styled(motion.div)`
+export const SContainer = styled.div`
   position: relative;
   width: min-content;
 
@@ -10,6 +10,26 @@ export const SButton = styled(motion.div)`
   margin-right: 12px;
   margin-bottom: 16px;
 
+  padding-bottom: calc(80px + env(safe-area-inset-bottom));
+
+  @media ${theme.viewport.gte.md} {
+    position: fixed;
+    bottom: 16px;
+    right: 20px;
+
+    margin: 0;
+  }
+
+  @media ${theme.viewport.gte.sm} {
+    margin-left: auto;
+    margin-right: 20px;
+    right: 0px;
+    bottom: 16px;
+    padding-bottom: 0;
+  }
+`
+
+export const SButton = styled(motion.div)`
   display: flex;
   align-items: center;
 
@@ -26,20 +46,6 @@ export const SButton = styled(motion.div)`
   backdrop-filter: blur(20px);
 
   cursor: pointer;
-
-  @media ${theme.viewport.gte.md} {
-    position: fixed;
-    bottom: 16px;
-    right: 16px;
-
-    margin: 0;
-  }
-
-  @media ${theme.viewport.gte.sm} {
-    margin-left: auto;
-
-    bottom: 16px;
-  }
 `
 
 export const SName = styled(motion.div)`
diff --git a/src/sections/provider/components/ProviderSelectButton/ProviderSelectButton.tsx b/src/sections/provider/components/ProviderSelectButton/ProviderSelectButton.tsx
index 25e9a59c0..82f53a4f4 100644
--- a/src/sections/provider/components/ProviderSelectButton/ProviderSelectButton.tsx
+++ b/src/sections/provider/components/ProviderSelectButton/ProviderSelectButton.tsx
@@ -6,7 +6,7 @@ import { useState } from "react"
 import ChevronRightIcon from "assets/icons/ChevronRightIcon.svg?react"
 import { ProviderSelectModal } from "sections/provider/ProviderSelectModal"
 import { ProviderStatus } from "sections/provider/ProviderStatus"
-import { SButton, SName } from "./ProviderSelectButton.styled"
+import { SButton, SName, SContainer } from "./ProviderSelectButton.styled"
 import { useRpcProvider } from "providers/rpcProvider"
 import { theme } from "theme"
 
@@ -20,7 +20,7 @@ export const ProviderSelectButton = () => {
   const number = useBestNumber(!isLoaded)
 
   return (
-    <>
+    <SContainer>
       <SButton
         tabIndex={0}
         onClick={() => setOpen(true)}
@@ -49,6 +49,6 @@ export const ProviderSelectButton = () => {
       {open && (
         <ProviderSelectModal open={open} onClose={() => setOpen(false)} />
       )}
-    </>
+    </SContainer>
   )
 }