From f64570eea58f18e3bd68607da952523b5132d8e1 Mon Sep 17 00:00:00 2001
From: Uncle Fatso <uncle.fatso@ghostchain.io>
Date: Mon, 30 Jun 2025 20:01:07 +0300
Subject: [PATCH] make select network element fit into the screen on mobile
 devices

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
---
 package.json                            | 2 +-
 src/components/PageTitle/PageTitle.jsx  | 2 +-
 src/components/TopBar/SelectNetwork.jsx | 6 +++---
 src/components/TopBar/TopBar.jsx        | 4 +++-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index d996006..8874432 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.1.3",
+  "version": "0.1.4",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/components/PageTitle/PageTitle.jsx b/src/components/PageTitle/PageTitle.jsx
index 6225c57..7bee469 100644
--- a/src/components/PageTitle/PageTitle.jsx
+++ b/src/components/PageTitle/PageTitle.jsx
@@ -2,7 +2,7 @@ import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 
 const PageTitle = ({ name, subtitle, noMargin }) => {
     const theme = useTheme();
-    const mobile = useMediaQuery(theme.breakpoints.down("sm"));
+    const mobile = useMediaQuery(theme.breakpoints.down("700"));
 
     return (
         <Box
diff --git a/src/components/TopBar/SelectNetwork.jsx b/src/components/TopBar/SelectNetwork.jsx
index 9341680..4aee6b6 100644
--- a/src/components/TopBar/SelectNetwork.jsx
+++ b/src/components/TopBar/SelectNetwork.jsx
@@ -14,7 +14,7 @@ import EthIcon from "../../assets/tokens/ETH.svg?react";
 import { useSwitchChain } from 'wagmi';
 import toast from "react-hot-toast";
 
-function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId }) {
+function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, small }) {
     const theme = useTheme();
     const { chains, switchChain } = useSwitchChain();
 
@@ -37,7 +37,7 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId })
     }
 
     return(
-        <FormControl sx={{ width: "155px" }}>
+        <FormControl sx={{ width: small ? "100px" : "155px" }}>
             <Select
                 labelId="network-select-helper-label"
                 id="network-select-helper"
@@ -58,7 +58,7 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId })
                         <MenuItem key={chain.name} value={chain.id}>
                             <Box gap="10px" display="flex" flexDirection="row" alignItems="center">
                                 <SvgIcon component={EthIcon} viewBox="0 0 32 32" />
-                                <Typography>{chain.name}</Typography>
+                                {!small && <Typography>{chain.name}</Typography>}
                             </Box>
                         </MenuItem>
                     )
diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx
index 487909c..d823439 100644
--- a/src/components/TopBar/TopBar.jsx
+++ b/src/components/TopBar/TopBar.jsx
@@ -23,6 +23,7 @@ function TopBar({
 }) {
     const themeColor = useTheme();
     const desktop = useMediaQuery(themeColor.breakpoints.up(1048));
+    const small = useMediaQuery(themeColor.breakpoints.down(400));
     return (
         <Box
             display="flex"
@@ -32,11 +33,12 @@ function TopBar({
             marginRight={desktop ? "33px" : "0px"}
             >
             <Box display="flex" alignItems="center">
-                <Box display="flex" justifyContent="space-between" alignItems="center" width="320px">
+                <Box display="flex" justifyContent="space-between" alignItems="center" width={small ? "calc(100vw - 78px)" : "320px"}>
                     <SelectNetwork
                         wrongNetworkToastId={wrongNetworkToastId}
                         setWrongNetworkToastId={setWrongNetworkToastId}
                         chainId={chainId}
+                        small={small}
                     />
                     <Wallet address={address} connect={connect} chainId={chainId} />
                 </Box>