From 06756947794c8666dffaf6be171f58b1a4111e0e Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Mon, 2 Mar 2026 04:35:51 +0000
Subject: [PATCH] fix: bug: Desktop Connect button never renders at 1280px
 width (#399)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 tests/setup/wallet-provider.ts       | 17 +++--------------
 web-app/src/composables/useMobile.ts |  2 +-
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/tests/setup/wallet-provider.ts b/tests/setup/wallet-provider.ts
index f9c4b28..cc05116 100644
--- a/tests/setup/wallet-provider.ts
+++ b/tests/setup/wallet-provider.ts
@@ -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(() => {
diff --git a/web-app/src/composables/useMobile.ts b/web-app/src/composables/useMobile.ts
index e7aa454..4135f9f 100644
--- a/web-app/src/composables/useMobile.ts
+++ b/web-app/src/composables/useMobile.ts
@@ -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;