fix: bug: Desktop Connect button never renders at 1280px width (#399)

Replace screen.width with window.innerWidth in useMobile composable.
screen.width reports the physical screen size (0 in headless Chromium),
while window.innerWidth reflects the actual viewport — the correct metric
for responsive layout. The previous Object.defineProperty workaround in
wallet-provider.ts could not override the native Screen.prototype getter,
so screen.width remained 0, isMobile stayed true, and ConnectButton was
never rendered. Fix wallet-provider.ts to pass viewport/screen options
directly to browser.newContext() and remove the broken init-script shim.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
openhands 2026-03-02 04:35:51 +00:00
parent e9abea2307
commit 0675694779
2 changed files with 4 additions and 15 deletions

View file

@ -29,20 +29,9 @@ export async function createWalletContext(
const address = wallet.address;
const chainIdHex = `0x${chainId.toString(16)}`;
const context = await browser.newContext();
// Override screen.width to ensure desktop mode (the app uses screen.width for mobile detection)
// In headless CI environments, screen.width may not match the viewport
await context.addInitScript(() => {
Object.defineProperty(window.screen, 'width', {
configurable: true,
value: 1280,
});
Object.defineProperty(window.screen, 'availWidth', {
configurable: true,
value: 1280,
});
console.info('[wallet-provider] Set screen.width to 1280 for desktop mode');
const context = await browser.newContext({
viewport: { width: 1280, height: 720 },
screen: { width: 1280, height: 720 },
});
await context.addInitScript(() => {

View file

@ -10,7 +10,7 @@ export function useMobile() {
isMobile.value = isMobileFunc();
function isMobileFunc() {
if (screen.width <= 768) {
if (window.innerWidth <= 768) {
return true;
} else {
return false;