Fix browser phone Twilio SDK loading and CSS layout issues
- Update Twilio SDK URL from sdk.twilio.com to unpkg CDN (same as backend) - Change SDK version from 2.11.1 to 2.11.0 for consistency - Fix dial number input overflow by adding box-sizing: border-box - Ensure all elements use border-box sizing model 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
		@@ -7,6 +7,11 @@
 | 
			
		||||
    border-radius: 12px;
 | 
			
		||||
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 | 
			
		||||
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
 | 
			
		||||
    box-sizing: border-box;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.twp-browser-phone-container * {
 | 
			
		||||
    box-sizing: border-box;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.twp-browser-phone-container.compact {
 | 
			
		||||
 
 | 
			
		||||
@@ -26,12 +26,12 @@ class TWP_Shortcodes {
 | 
			
		||||
        global $post;
 | 
			
		||||
        
 | 
			
		||||
        if (is_a($post, 'WP_Post') && has_shortcode($post->post_content, 'twp_browser_phone')) {
 | 
			
		||||
            // Enqueue Twilio Voice SDK with multiple fallbacks
 | 
			
		||||
            // Enqueue Twilio Voice SDK from unpkg CDN (same as backend)
 | 
			
		||||
            wp_enqueue_script(
 | 
			
		||||
                'twilio-voice-sdk',
 | 
			
		||||
                'https://sdk.twilio.com/js/voice/2.11.1/twilio.min.js',
 | 
			
		||||
                'https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js',
 | 
			
		||||
                array(),
 | 
			
		||||
                '2.11.1',
 | 
			
		||||
                '2.11.0',
 | 
			
		||||
                false // Load in head to ensure it's available
 | 
			
		||||
            );
 | 
			
		||||
            
 | 
			
		||||
@@ -41,7 +41,7 @@ class TWP_Shortcodes {
 | 
			
		||||
                    if (typeof Twilio === 'undefined') {
 | 
			
		||||
                        console.warn('Primary Twilio SDK failed, attempting fallback load');
 | 
			
		||||
                        var script = document.createElement('script');
 | 
			
		||||
                        script.src = 'https://sdk.twilio.com/js/voice/2.11.1/twilio.min.js';
 | 
			
		||||
                        script.src = 'https://unpkg.com/@twilio/voice-sdk@2.11.0/dist/twilio.min.js';
 | 
			
		||||
                        script.onload = function() { console.log('Fallback Twilio SDK loaded'); };
 | 
			
		||||
                        script.onerror = function() { console.error('Fallback Twilio SDK failed'); };
 | 
			
		||||
                        document.head.appendChild(script);
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user