Fix notification button overflow on tablets and bump version to 2.2.0
- Fix notification button text overflow on tablet devices - Add tablet-specific media queries for button sizing and layout - Shorten button text from "Enable Notifications" to "Enable Alerts" - Add responsive button constraints with min/max width and text overflow handling - Stack queue action buttons vertically on tablets for better fit - Bump plugin version from 2.1.0 to 2.2.0 to include all recent enhancements 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
		@@ -265,12 +265,20 @@
 | 
			
		||||
    background: #17a2b8;
 | 
			
		||||
    color: white;
 | 
			
		||||
    border: none;
 | 
			
		||||
    padding: 10px 20px;
 | 
			
		||||
    padding: 10px 15px;
 | 
			
		||||
    border-radius: 6px;
 | 
			
		||||
    cursor: pointer;
 | 
			
		||||
    font-size: 14px;
 | 
			
		||||
    font-size: 13px;
 | 
			
		||||
    font-weight: 500;
 | 
			
		||||
    transition: all 0.2s ease;
 | 
			
		||||
    white-space: nowrap;
 | 
			
		||||
    overflow: hidden;
 | 
			
		||||
    text-overflow: ellipsis;
 | 
			
		||||
    min-width: 120px;
 | 
			
		||||
    max-width: 200px;
 | 
			
		||||
    display: inline-block;
 | 
			
		||||
    text-align: center;
 | 
			
		||||
    line-height: 1.4;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
.twp-btn-info:hover {
 | 
			
		||||
@@ -702,6 +710,25 @@
 | 
			
		||||
    margin-bottom: 16px;
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* Tablet optimizations */
 | 
			
		||||
@media (max-width: 768px) and (min-width: 481px) {
 | 
			
		||||
    .twp-btn-info {
 | 
			
		||||
        font-size: 12px;
 | 
			
		||||
        padding: 8px 12px;
 | 
			
		||||
        min-width: 140px;
 | 
			
		||||
        max-width: 180px;
 | 
			
		||||
    }
 | 
			
		||||
    
 | 
			
		||||
    .global-queue-actions {
 | 
			
		||||
        flex-direction: column;
 | 
			
		||||
        gap: 10px;
 | 
			
		||||
    }
 | 
			
		||||
    
 | 
			
		||||
    .global-queue-actions .twp-btn {
 | 
			
		||||
        min-width: 150px;
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* Responsive Design */
 | 
			
		||||
@media (max-width: 480px) {
 | 
			
		||||
    .twp-browser-phone-container {
 | 
			
		||||
 
 | 
			
		||||
@@ -1193,7 +1193,7 @@
 | 
			
		||||
                const $notificationBtn = $('<button>')
 | 
			
		||||
                    .attr('id', 'twp-enable-notifications')
 | 
			
		||||
                    .addClass('twp-btn twp-btn-info')
 | 
			
		||||
                    .html('🔔 Enable Notifications')
 | 
			
		||||
                    .html('🔔 Enable Alerts')
 | 
			
		||||
                    .on('click', requestNotificationPermission);
 | 
			
		||||
                
 | 
			
		||||
                $('#twp-queue-global-actions .global-queue-actions').append($notificationBtn);
 | 
			
		||||
 
 | 
			
		||||
@@ -3,7 +3,7 @@
 | 
			
		||||
 * Plugin Name: Twilio WP Plugin
 | 
			
		||||
 * Plugin URI: https://repo.anhonesthost.net/wp-plugins/twilio-wp-plugin
 | 
			
		||||
 * Description: WordPress plugin for Twilio integration with phone scheduling, call forwarding, queue management, and Eleven Labs TTS
 | 
			
		||||
 * Version: 2.1.0
 | 
			
		||||
 * Version: 2.2.0
 | 
			
		||||
 * Author: Josh Knapp
 | 
			
		||||
 * License: GPL v2 or later
 | 
			
		||||
 * Text Domain: twilio-wp-plugin
 | 
			
		||||
@@ -15,7 +15,7 @@ if (!defined('WPINC')) {
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// Plugin constants
 | 
			
		||||
define('TWP_VERSION', '2.1.0');
 | 
			
		||||
define('TWP_VERSION', '2.2.0');
 | 
			
		||||
define('TWP_DB_VERSION', '1.1.0'); // Track database version separately
 | 
			
		||||
define('TWP_PLUGIN_DIR', plugin_dir_path(__FILE__));
 | 
			
		||||
define('TWP_PLUGIN_URL', plugin_dir_url(__FILE__));
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user