ghostchain/ghost-dao-interface
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make select network element fit into the screen on mobile devices

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2025-06-30 20:01:07 +03:00
parent 5dffd62c5a
commit f64570eea5
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
4 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,7 +1,7 @@
{
"name": "ghost-dao-interface",
"private": true,
"version": "0.1.3",
"version": "0.1.4",
"type": "module",
"scripts": {
"dev": "vite",

2
src/components/PageTitle/PageTitle.jsx
View File

@ -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

6
src/components/TopBar/SelectNetwork.jsx
View File

@ -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>
)

4
src/components/TopBar/TopBar.jsx
View File

@ -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>