adjust mobile view

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2026-04-10 13:51:47 +03:00
parent 1663e82172
commit 73db807107
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
7 changed files with 13 additions and 13 deletions

View File

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

View File

@ -121,7 +121,7 @@ function App() {
const provider = usePublicClient();
const chainId = useChainId();
const isSmallerScreen = useMediaQuery("(max-width: 1047px)");
const isSmallerScreen = useMediaQuery("(max-width: 1130px)");
const isSmallScreen = useMediaQuery("(max-width: 600px)");
const {

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("700"));
const mobile = useMediaQuery(theme.breakpoints.down("900"));
return (
<Box

View File

@ -6,7 +6,7 @@ import { PrimaryButton } from "../Button"
const GHOST_CONNECT = 'https://git.ghostchain.io/ghostchain/ghost-extension-wallet/releases';
function GhostChainSelect() {
function GhostChainSelect({ small }) {
const { providerDetail, isConnected } = useUnstableProvider();
const theme = useTheme();
@ -14,7 +14,7 @@ function GhostChainSelect() {
return (
<Box
height="39px"
width="155px"
width={small ? "100px" : "155px"}
borderRadius="4px"
padding="0 14px"
border="1px solid #50759e"
@ -29,7 +29,7 @@ function GhostChainSelect() {
>
<Box display="flex" flexDirection="row">
<SvgIcon component={parseKnownToken("CSPR")} inheritViewBox />
<Typography sx={{ paddingLeft: "6px"}}>CASPER</Typography>
{!small && <Typography sx={{ paddingLeft: "6px"}}>CASPER</Typography>}
</Box>
<Box
width="21px"
@ -43,13 +43,13 @@ function GhostChainSelect() {
}
return (
<Box height="39px" width="155px">
<Box height="39px" width={small ? "100px" : "155px"}>
<PrimaryButton
sx={{ margin: "0 !important", padding: "0 !important" }}
onClick={() => window.open(GHOST_CONNECT, '_blank', 'noopener,noreferrer')}
fullWidth
>
Get GHOST Connect
Get GHOST {small ? "" : "Connect"}
</PrimaryButton>
</Box>
)

View File

@ -71,7 +71,7 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, s
}
return(
<FormControl sx={{ width: small ? "100px" : "155px" }}>
<FormControl sx={{ width: small ? "auto" : "155px" }}>
<Select
labelId="network-select-helper-label"
id="network-select-helper"

View File

@ -23,8 +23,8 @@ function TopBar({
setWrongNetworkToastId
}) {
const themeColor = useTheme();
const desktop = useMediaQuery(themeColor.breakpoints.up(1048));
const small = useMediaQuery(themeColor.breakpoints.down(400));
const desktop = useMediaQuery(themeColor.breakpoints.up(1130));
const small = useMediaQuery(themeColor.breakpoints.down(600));
return (
<Box
display="flex"
@ -41,7 +41,7 @@ function TopBar({
width={small ? "calc(100vw - 78px)" : "500px"}
height="40px"
>
<GhostChainSelect />
<GhostChainSelect small={small} />
<SelectNetwork
wrongNetworkToastId={wrongNetworkToastId}
setWrongNetworkToastId={setWrongNetworkToastId}

View File

@ -11,7 +11,7 @@ const WalletButton = ({ openWallet, connect }) => {
const { isConnected, chain } = useAccount();
const theme = useTheme();
const onClick = isConnected ? openWallet : connect;
const label = isConnected ? "Open Wallet" : `Connect Wallet`;
const label = isConnected ? "Wallet" : `Connect`;
return (
<Button
id="fatso-menu-button"