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", "name": "ghost-dao-interface",
"private": true, "private": true,
"version": "0.1.3", "version": "0.1.4",
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "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 PageTitle = ({ name, subtitle, noMargin }) => {
const theme = useTheme(); const theme = useTheme();
const mobile = useMediaQuery(theme.breakpoints.down("sm")); const mobile = useMediaQuery(theme.breakpoints.down("700"));
return ( return (
<Box <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 { useSwitchChain } from 'wagmi';
import toast from "react-hot-toast"; import toast from "react-hot-toast";
function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId }) { function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, small }) {
const theme = useTheme(); const theme = useTheme();
const { chains, switchChain } = useSwitchChain(); const { chains, switchChain } = useSwitchChain();
@ -37,7 +37,7 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId })
} }
return( return(
<FormControl sx={{ width: "155px" }}> <FormControl sx={{ width: small ? "100px" : "155px" }}>
<Select <Select
labelId="network-select-helper-label" labelId="network-select-helper-label"
id="network-select-helper" id="network-select-helper"
@ -58,7 +58,7 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId })
<MenuItem key={chain.name} value={chain.id}> <MenuItem key={chain.name} value={chain.id}>
<Box gap="10px" display="flex" flexDirection="row" alignItems="center"> <Box gap="10px" display="flex" flexDirection="row" alignItems="center">
<SvgIcon component={EthIcon} viewBox="0 0 32 32" /> <SvgIcon component={EthIcon} viewBox="0 0 32 32" />
<Typography>{chain.name}</Typography> {!small && <Typography>{chain.name}</Typography>}
</Box> </Box>
</MenuItem> </MenuItem>
) )

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

@ -23,6 +23,7 @@ function TopBar({
}) { }) {
const themeColor = useTheme(); const themeColor = useTheme();
const desktop = useMediaQuery(themeColor.breakpoints.up(1048)); const desktop = useMediaQuery(themeColor.breakpoints.up(1048));
const small = useMediaQuery(themeColor.breakpoints.down(400));
return ( return (
<Box <Box
display="flex" display="flex"
@ -32,11 +33,12 @@ function TopBar({
marginRight={desktop ? "33px" : "0px"} marginRight={desktop ? "33px" : "0px"}
> >
<Box display="flex" alignItems="center"> <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 <SelectNetwork
wrongNetworkToastId={wrongNetworkToastId} wrongNetworkToastId={wrongNetworkToastId}
setWrongNetworkToastId={setWrongNetworkToastId} setWrongNetworkToastId={setWrongNetworkToastId}
chainId={chainId} chainId={chainId}
small={small}
/> />
<Wallet address={address} connect={connect} chainId={chainId} /> <Wallet address={address} connect={connect} chainId={chainId} />
</Box> </Box>