Merge pull request #647 from yagopajarino/fix/641

refactor: make connected account button responsive for small sreens
bandada-infra · Jan 9, 2025 · 310c5a3 · 310c5a3
2 parents 0c30d3c + 0fe57ac
commit 310c5a3
Showing 1 changed file with 14 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"
@@ -73,9 +83,9 @@ export default function NavBar(): JSX.Element {
                     >
                         {!isLoggedInAdmin()
                             ? "Unconnected account"
-                            : `Connected as ${shortenAddress(
-                                  address as string
-                              )}`}
+                            : `${
+                                  isWideScreen ? "Connected as" : ""
+                              } ${shortenAddress(address as string)}`}
                     </Button>
                 </HStack>
             </HStack>