Improve Mobile detection in WC connection (#8415)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR enhances the `isMobile` function to include viewport detection for mobile devices and refines the QR overlay creation logic for desktop environments by ensuring existing overlays are cleaned up before creating new ones.

### Detailed summary
- Added viewport detection in `isMobile` function to return `true` if `window.innerWidth` is less than 640.
- Refactored QR overlay creation in `create-wallet.ts` to ensure existing overlays are destroyed before creating a new one.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **Bug Fixes**
  * Improved mobile device detection based on viewport size.
  * Enhanced QR code overlay display with better error handling and resource cleanup.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

packages/thirdweb/src/utils/web/isMobile.ts

@@ -57,6 +57,7 @@ function hasMobileAPIs(): boolean {
  */
 export function isMobile(): boolean {
   // Primary signal: OS detection via user agent
+
   const isMobileOS = isAndroid() || isIOS();
 
   if (isMobileOS) {
@@ -70,5 +71,12 @@ export function isMobile(): boolean {
     return true;
   }
 
+  const isMobileViewport =
+    typeof window !== "undefined" && window.innerWidth < 640;
+
+  if (isMobileViewport) {
+    return true;
+  }
+
   return false;
 }

packages/thirdweb/src/wallets/create-wallet.ts

@@ -341,34 +341,35 @@ export function createWallet<const ID extends WalletId>(
                             }
                             return;
                           }
+                          // on desktop, create a QR overlay
+                          else {
+                            try {
+                              const { createQROverlay } = await import(
+                                "./wallet-connect/qr-overlay.js"
+                              );
 
-                          try {
-                            // on desktop, create a QR overlay
-                            const { createQROverlay } = await import(
-                              "./wallet-connect/qr-overlay.js"
-                            );
+                              // Clean up any existing overlay
+                              if (qrOverlay) {
+                                qrOverlay.destroy();
+                              }
 
-                            // Clean up any existing overlay
-                            if (qrOverlay) {
-                              qrOverlay.destroy();
+                              // Create new QR overlay
+                              qrOverlay = createQROverlay(uri, {
+                                theme:
+                                  wcOptions.walletConnect?.qrModalOptions
+                                    ?.themeMode ?? "dark",
+                                qrSize: 280,
+                                showCloseButton: true,
+                                onCancel: () => {
+                                  wcOptions.walletConnect?.onCancel?.();
+                                },
+                              });
+                            } catch (error) {
+                              console.error(
+                                "Failed to create QR overlay:",
+                                error,
+                              );
                             }
-
-                            // Create new QR overlay
-                            qrOverlay = createQROverlay(uri, {
-                              theme:
-                                wcOptions.walletConnect?.qrModalOptions
-                                  ?.themeMode ?? "dark",
-                              qrSize: 280,
-                              showCloseButton: true,
-                              onCancel: () => {
-                                wcOptions.walletConnect?.onCancel?.();
-                              },
-                            });
-                          } catch (error) {
-                            console.error(
-                              "Failed to create QR overlay:",
-                              error,
-                            );
                           }
                         }
                       }),