Merge branch 'master' into 86bz55mnp

galacticcouncil · Jun 20, 2024 · 1bfde38 · 1bfde38
2 parents 8cc91dc + d940f2d
commit 1bfde38
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 22 deletions.
diff --git 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};
 
@@ -20,6 +20,10 @@ export const SPage = styled.div`
 
     overflow-y: auto;
   }
+
+  @media ${theme.viewport.gte.md} {
+    height: 100vh;
+  }
 `
 
 export const SGradientBg = styled.div`
@@ -40,8 +44,6 @@ export const SPageContent = styled.main`
   flex-direction: column;
   flex-grow: 1;
 
-  padding-bottom: var(--mobile-nav-height);
-
   ::-webkit-scrollbar {
     width: 0px;
   }
@@ -52,7 +54,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
@@ -2,14 +2,34 @@ 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;
 
   margin-left: auto;
   margin-right: 12px;
   margin-bottom: 16px;
 
+  padding-bottom: calc(80px + env(safe-area-inset-bottom));
+
+  @media ${theme.viewport.gte.sm} {
+    margin-left: auto;
+    margin-right: 20px;
+    right: 0px;
+    bottom: 16px;
+    padding-bottom: calc(20px + env(safe-area-inset-bottom));
+  }
+
+  @media ${theme.viewport.gte.md} {
+    position: fixed;
+    bottom: 16px;
+    right: 20px;
+    margin: 0;
+    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
@@ -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>
   )
 }