From 7398f97f2420c541115ecb0765ff3cd66d6f4244 Mon Sep 17 00:00:00 2001
From: Josh Knapp <jknapp85@gmail.com>
Date: Fri, 15 Aug 2025 17:12:33 -0700
Subject: [PATCH] Fix notification button overflow on tablets and bump version
 to 2.2.0
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 assets/css/browser-phone-frontend.css | 31 +++++++++++++++++++++++++--
 assets/js/browser-phone-frontend.js   |  2 +-
 twilio-wp-plugin.php                  |  4 ++--
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/assets/css/browser-phone-frontend.css b/assets/css/browser-phone-frontend.css
index 01e6a91..5c0f435 100644
--- a/assets/css/browser-phone-frontend.css
+++ b/assets/css/browser-phone-frontend.css
@@ -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 {
diff --git a/assets/js/browser-phone-frontend.js b/assets/js/browser-phone-frontend.js
index d6ab8e3..e05366e 100644
--- a/assets/js/browser-phone-frontend.js
+++ b/assets/js/browser-phone-frontend.js
@@ -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);
diff --git a/twilio-wp-plugin.php b/twilio-wp-plugin.php
index e180555..83703b2 100644
--- a/twilio-wp-plugin.php
+++ b/twilio-wp-plugin.php
@@ -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__));