From 73db807107365e2bc13fd529aa8afaaaaa7e3311 Mon Sep 17 00:00:00 2001
From: Uncle Fatso <uncle.fatso@ghostchain.io>
Date: Fri, 10 Apr 2026 13:51:47 +0300
Subject: [PATCH] adjust mobile view

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
---
 package.json                               |  2 +-
 src/App.jsx                                |  2 +-
 src/components/PageTitle/PageTitle.jsx     |  2 +-
 src/components/TopBar/GhostChainSelect.jsx | 10 +++++-----
 src/components/TopBar/SelectNetwork.jsx    |  2 +-
 src/components/TopBar/TopBar.jsx           |  6 +++---
 src/components/TopBar/Wallet/index.tsx     |  2 +-
 7 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 3d60390..83e07d8 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.7.11",
+  "version": "0.7.12",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src/App.jsx b/src/App.jsx
index 724d995..e89bde9 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -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 {
diff --git a/src/components/PageTitle/PageTitle.jsx b/src/components/PageTitle/PageTitle.jsx
index 7bee469..6113a7a 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("700"));
+    const mobile = useMediaQuery(theme.breakpoints.down("900"));
 
     return (
         <Box
diff --git a/src/components/TopBar/GhostChainSelect.jsx b/src/components/TopBar/GhostChainSelect.jsx
index 6a51669..b9699a9 100644
--- a/src/components/TopBar/GhostChainSelect.jsx
+++ b/src/components/TopBar/GhostChainSelect.jsx
@@ -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>
     )
diff --git a/src/components/TopBar/SelectNetwork.jsx b/src/components/TopBar/SelectNetwork.jsx
index 34d1b33..a301671 100644
--- a/src/components/TopBar/SelectNetwork.jsx
+++ b/src/components/TopBar/SelectNetwork.jsx
@@ -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"
diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx
index df509cb..21ae83b 100644
--- a/src/components/TopBar/TopBar.jsx
+++ b/src/components/TopBar/TopBar.jsx
@@ -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}
diff --git a/src/components/TopBar/Wallet/index.tsx b/src/components/TopBar/Wallet/index.tsx
index ee53991..4c4b5c4 100644
--- a/src/components/TopBar/Wallet/index.tsx
+++ b/src/components/TopBar/Wallet/index.tsx
@@ -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"