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 = $('