fix: use hideFrom to prevent layout shifts

For MobileButton component, removing usage of Hide/Show

Author: wackerow

src/components/MdComponents.tsx

@@ -234,6 +234,7 @@ export const MobileButton = (props: ChildOnlyProp) => {
   const borderColor = useToken("colors", "border")
   return (
     <Box
+      hideFrom="lg"
       bg="background.base"
       boxShadow={`0 -1px 0 ${borderColor}`}
       position="sticky"

src/layouts/Roadmap.tsx

@@ -2,7 +2,6 @@ import {
   Box,
   Center,
   Flex,
-  Show,
   SimpleGrid,
   useToken,
   Wrap,
@@ -199,11 +198,9 @@ export const RoadmapLayout: React.FC<IProps> = ({
           {children}
           <FeedbackCard />
         </ContentContainer>
-        <Show below="lg">
-          <MobileButton>
-            <MobileButtonDropdown list={dropdownLinks} />
-          </MobileButton>
-        </Show>
+        <MobileButton>
+          <MobileButtonDropdown list={dropdownLinks} />
+        </MobileButton>
       </Page>
     </Box>
   )

src/layouts/Staking.tsx

@@ -6,7 +6,6 @@ import {
   Flex,
   Grid,
   type HeadingProps,
-  Show,
   SimpleGrid,
   Text,
   UnorderedList,
@@ -292,12 +291,9 @@ export const StakingLayout: React.FC<IProps> = ({
           <StakingCommunityCallout my={16} />
           <FeedbackCard />
         </ContentContainer>
-        {/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
-        <Show below={lgBp}>
-          <MobileButton>
-            <MobileButtonDropdown list={dropdownLinks} />
-          </MobileButton>
-        </Show>
+        <MobileButton>
+          <MobileButtonDropdown list={dropdownLinks} />
+        </MobileButton>
       </Page>
     </Box>
   )

src/layouts/Upgrade.tsx

@@ -222,11 +222,9 @@ export const UpgradeLayout: React.FC<IProps> = ({
           {children}
           <FeedbackCard />
         </ContentContainer>
-        <Show below={lgBreakpoint}>
-          <MobileButton>
-            <MobileButtonDropdown list={dropdownLinks} />
-          </MobileButton>
-        </Show>
+        <MobileButton>
+          <MobileButtonDropdown list={dropdownLinks} />
+        </MobileButton>
       </Page>
     </Container>
   )

src/layouts/UseCases.tsx

@@ -4,7 +4,6 @@ import { MdExpandMore } from "react-icons/md"
 import {
   Box,
   Flex,
-  Hide,
   Icon,
   ListItem,
   Text,
@@ -256,11 +255,9 @@ export const UseCasesLayout: React.FC<IProps> = ({
           {children}
           <FeedbackCard />
         </ContentContainer>
-        <Hide above={lgBp}>
-          <MobileButton>
-            <MobileButtonDropdown list={dropdownLinks} />
-          </MobileButton>
-        </Hide>
+        <MobileButton>
+          <MobileButtonDropdown list={dropdownLinks} />
+        </MobileButton>
       </Page>
     </Box>
   )

src/pages/staking/index.tsx

@@ -2,7 +2,7 @@ import { ReactNode } from "react"
 import { GetStaticProps, InferGetStaticPropsType } from "next"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
-import { Box, Flex, Grid, HeadingProps, Show, useToken } from "@chakra-ui/react"
+import { Box, Flex, Grid, HeadingProps, useToken } from "@chakra-ui/react"
 
 import type {
   BasePageProps,
@@ -742,12 +742,9 @@ const StakingPage = ({
             </Box>
           </Flex>
         </ContentContainer>
-        {/* // TODO: Switch to `above="lg"` after completion of Chakra Migration */}
-        <Show below={lgBp}>
-          <MobileButton>
-            <MobileButtonDropdown list={dropdownLinks} />
-          </MobileButton>
-        </Show>
+        <MobileButton>
+          <MobileButtonDropdown list={dropdownLinks} />
+        </MobileButton>
       </Page>
     </PageContainer>
   )