From 68f7ca6cab574a1ce25c4c2d8584d0963017e1c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Tue, 17 Dec 2024 17:30:29 -0300
Subject: [PATCH 1/2] refactor: make connected account button responsive for
 small sreens

re #641
---
 apps/dashboard/src/components/navbar.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/components/navbar.tsx b/apps/dashboard/src/components/navbar.tsx
index 003a03dc..4ab87ba7 100644
--- a/apps/dashboard/src/components/navbar.tsx
+++ b/apps/dashboard/src/components/navbar.tsx
@@ -73,9 +73,11 @@ export default function NavBar(): JSX.Element {
                     >
                         {!isLoggedInAdmin()
                             ? "Unconnected account"
-                            : `Connected as ${shortenAddress(
-                                  address as string
-                              )}`}
+                            : `${
+                                  window.screen.availWidth > 375
+                                      ? "Connected as"
+                                      : ""
+                              } ${shortenAddress(address as string)}`}
                     </Button>
                 </HStack>
             </HStack>

From 0fe57ac2bd0e1ddb62ca3b46894dfb21d5f5c682 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Yago=20Pajari=C3=B1o?= <yagopajarino@outlook.com>
Date: Sat, 28 Dec 2024 10:41:38 -0300
Subject: [PATCH 2/2] refactor: wrap for small screens

---
 apps/dashboard/src/components/navbar.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/components/navbar.tsx b/apps/dashboard/src/components/navbar.tsx
index 4ab87ba7..3b022c0c 100644
--- 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>