fix: broken modal layout when using embedded (#4242)

Co-authored-by: Sven <[email protected]>

Author: magiziz

.changeset/sweet-women-beam.md

@@ -0,0 +1,24 @@
+---
+'@reown/appkit-wallet': patch
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-controllers': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Fixed an issue causing a broken modal layout when using the embedded wallet

packages/wallet/src/W3mFrame.ts

@@ -59,6 +59,7 @@ export class W3mFrame {
         iframe.style.position = 'fixed'
         iframe.style.zIndex = '999999'
         iframe.style.display = 'none'
+        iframe.style.border = 'none'
         iframe.style.animationDelay = '0s, 50ms'
         iframe.style.borderBottomLeftRadius = `clamp(0px, var(--wui-border-radius-l), 44px)`
         iframe.style.borderBottomRightRadius = `clamp(0px, var(--wui-border-radius-l), 44px)`

packages/wallet/tests/W3mFrame.test.ts

@@ -1,4 +1,3 @@
-import * as logger from '@walletconnect/logger'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { W3mFrame } from '../src/W3mFrame.js'
@@ -171,4 +170,33 @@ describe('W3mFrame', () => {
       expect(w3mFrame['iframe']?.src).toContain('enableLogger=false')
     })
   })
+
+  describe('iframe styles', () => {
+    it('should have correct initial CSS styles', () => {
+      const mockStyle: Record<string, string> = {}
+
+      const mockIframeElement = {
+        style: mockStyle,
+        addEventListener: vi.fn(),
+        setAttribute: vi.fn(),
+        onerror: null
+      }
+
+      mockDocument.createElement.mockReturnValue(mockIframeElement)
+
+      w3mFrame = new W3mFrame({ projectId: PROJECT_ID, isAppClient: true })
+
+      expect(mockStyle['position']).toBe('fixed')
+      expect(mockStyle['zIndex']).toBe('999999')
+      expect(mockStyle['display']).toBe('none')
+      expect(mockStyle['border']).toBe('none')
+      expect(mockStyle['animationDelay']).toBe('0s, 50ms')
+      expect(mockStyle['borderBottomLeftRadius']).toBe(
+        'clamp(0px, var(--wui-border-radius-l), 44px)'
+      )
+      expect(mockStyle['borderBottomRightRadius']).toBe(
+        'clamp(0px, var(--wui-border-radius-l), 44px)'
+      )
+    })
+  })
 })