From edb88a9f15c9e7d457d9ed7e56cb5f3f1a3bfb3e Mon Sep 17 00:00:00 2001
From: amitamrutiya2210 <amitamrutiya2210@gmail.com>
Date: Thu, 2 May 2024 10:09:38 +0530
Subject: [PATCH 1/2] fix: select menu change position issue in create api
 dialogue

Signed-off-by: amitamrutiya2210 <amitamrutiya2210@gmail.com>
---
 apps/dashboard/components/api-keys/create.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/apps/dashboard/components/api-keys/create.tsx b/apps/dashboard/components/api-keys/create.tsx
index dd664b08a2..a64695458e 100644
--- a/apps/dashboard/components/api-keys/create.tsx
+++ b/apps/dashboard/components/api-keys/create.tsx
@@ -218,6 +218,13 @@ const ApiKeyCreate = ({ usdWalletId, btcWalletId }: Prop) => {
                   >
                     <Typography>Expires In</Typography>
                     <Select
+                      slotProps={{
+                        listbox: {
+                          sx: {
+                            width: "100%",
+                          },
+                        },
+                      }}
                       data-testid="create-api-expire-select"
                       name="apiKeyExpiresInDaysSelect"
                       id="apiKeyExpiresInDaysSelect"

From c4ead7d3af84adfefed23a904b7b0f03e1c08b5c Mon Sep 17 00:00:00 2001
From: amitamrutiya2210 <amitamrutiya2210@gmail.com>
Date: Thu, 2 May 2024 10:28:49 +0530
Subject: [PATCH 2/2] chore(dashboard): add responsive heading text

Signed-off-by: amitamrutiya2210 <amitamrutiya2210@gmail.com>
---
 apps/dashboard/components/heading.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/components/heading.tsx b/apps/dashboard/components/heading.tsx
index c8352ad5b4..5a57170ac0 100644
--- a/apps/dashboard/components/heading.tsx
+++ b/apps/dashboard/components/heading.tsx
@@ -1,6 +1,9 @@
 "use client"
 import React from "react"
-import { Box, Typography } from "@mui/joy"
+
+import { Box } from "@mui/joy"
+import { Typography, useMediaQuery, useTheme } from "@mui/material"
+
 import { usePathname } from "next/navigation"
 
 import { URLS } from "@/app/url"
@@ -21,6 +24,8 @@ export function getTitle(path: string): {
 const Heading = () => {
   const pathName = usePathname()
   const pageInfo = getTitle(pathName)
+  const theme = useTheme()
+  const isMobileDevice = useMediaQuery(theme.breakpoints.down("sm"))
 
   return (
     <Box
@@ -33,14 +38,14 @@ const Heading = () => {
         justifyContent: "space-between",
       }}
     >
-      <Typography level="h2">{pageInfo.title}</Typography>
+      <Typography variant={isMobileDevice ? "h3" : "h2"}>{pageInfo.title}</Typography>
       <Typography
         sx={{
           color: "grey",
           fontSize: "1em",
           marginTop: "0.8em",
         }}
-        level="h4"
+        variant="h4"
       >
         {pageInfo.badge}
       </Typography>