refactor: wrap for small screens

bandada-infra · Dec 28, 2024 · 0fe57ac · 0fe57ac
1 parent 68f7ca6
commit 0fe57ac
Showing 1 changed file with 12 additions and 4 deletions.
diff --git a/apps/dashboard/src/components/navbar.tsx b/apps/dashboard/src/components/navbar.tsx
@@ -1,5 +1,12 @@
 import { shortenAddress } from "@bandada/utils"
-import { Button, Container, Heading, HStack, Image } from "@chakra-ui/react"
+import {
+    Button,
+    Container,
+    Heading,
+    HStack,
+    Image,
+    useMediaQuery
+} from "@chakra-ui/react"
 import { useAccountModal, useConnectModal } from "@rainbow-me/rainbowkit"
 import { useCallback, useContext } from "react"
 import { useAccount } from "wagmi"
@@ -25,10 +32,13 @@ export default function NavBar(): JSX.Element {
         [address, admin]
     )
 
+    const [isWideScreen] = useMediaQuery("(min-width: 426px)")
+
     return (
         <Container maxWidth="container.xl">
             <HStack
                 pt="80px"
+                wrap="wrap"
                 pb="40px"
                 align="center"
                 justify="space-between"
@@ -74,9 +84,7 @@ export default function NavBar(): JSX.Element {
                         {!isLoggedInAdmin()
                             ? "Unconnected account"
                             : `${
-                                  window.screen.availWidth > 375
-                                      ? "Connected as"
-                                      : ""
+                                  isWideScreen ? "Connected as" : ""
                               } ${shortenAddress(address as string)}`}
                     </Button>
                 </HStack>