From 153fd2799869c9037e79eec0cc5fe4de9bc6227e Mon Sep 17 00:00:00 2001 From: Miroslav Pejic Date: Thu, 16 Apr 2026 13:57:09 +0200 Subject: [PATCH] [call-me] - improve sidebar tab UX: icon-only tabs, i18n tooltips, and force Bootstrap tooltip placement to bottom --- package-lock.json | 4 +-- package.json | 2 +- public/client.js | 11 +++++++- public/index.html | 30 ++++++++++++++++++--- public/style.css | 69 ++++++++++++++++++++++++----------------------- tmp | 1 + 6 files changed, 76 insertions(+), 41 deletions(-) create mode 100644 tmp diff --git a/package-lock.json b/package-lock.json index 41054aa..4ac74b2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "call-me", - "version": "1.3.36", + "version": "1.3.37", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "call-me", - "version": "1.3.36", + "version": "1.3.37", "license": "AGPLv3", "dependencies": { "@ngrok/ngrok": "1.7.0", diff --git a/package.json b/package.json index 0f98f5e..c4e2b6c 100755 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "call-me", - "version": "1.3.36", + "version": "1.3.37", "description": "Your Go-To for Instant Video Calls", "author": "Miroslav Pejic - miroslav.pejic.85@gmail.com", "license": "AGPLv3", diff --git a/public/client.js b/public/client.js index ccd9cae..ab22b20 100755 --- a/public/client.js +++ b/public/client.js @@ -333,7 +333,16 @@ function handleToolTip() { const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')); const tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { - return new bootstrap.Tooltip(tooltipTriggerEl); + // Always force placement to bottom for sidebar tabs + if ( + tooltipTriggerEl.classList.contains('sidebar-tab') && + tooltipTriggerEl.getAttribute('data-placement') !== 'bottom' + ) { + tooltipTriggerEl.setAttribute('data-placement', 'bottom'); + } + return new bootstrap.Tooltip(tooltipTriggerEl, { + placement: tooltipTriggerEl.getAttribute('data-placement') || 'bottom', + }); }); // Add click event listener to hide all tooltips tooltipTriggerList.forEach(function (tooltipTriggerEl) { diff --git a/public/index.html b/public/index.html index b9fd6fa..33723a9 100755 --- a/public/index.html +++ b/public/index.html @@ -298,14 +298,38 @@
- - -
diff --git a/public/style.css b/public/style.css index f1731c7..c217835 100644 --- a/public/style.css +++ b/public/style.css @@ -1256,7 +1256,7 @@ input { display: flex; top: 0; right: 0; - width: clamp(320px, 90vw, 500px); + width: clamp(320px, 90vw, 420px); height: 100%; background: var(--glass-bg-strong); flex-direction: column; @@ -1327,7 +1327,7 @@ input { background: none; border: 2px solid transparent; color: var(--text-secondary); - font-size: var(--font-size-xs); + font-size: var(--font-size-base); font-weight: var(--font-weight-medium); padding: 10px 14px; cursor: pointer; @@ -1336,20 +1336,12 @@ input { position: relative; display: flex; align-items: center; - gap: 8px; - flex: 1 1 0; - min-width: 0; - white-space: nowrap; justify-content: center; - overflow: hidden; + flex: 0 0 auto; } .sidebar-tab span { - min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - display: block; + display: none; } .sidebar-tab i, @@ -1957,7 +1949,7 @@ input { /* Settings Section */ .settings-section { - padding: var(--spacing-lg) var(--spacing-xl); + padding: var(--spacing-xl) var(--spacing-lg); background: rgba(15, 20, 25, 0.4); height: 100%; overflow-y: auto; @@ -1966,15 +1958,16 @@ input { .settings-title { color: var(--text-color); - font-size: var(--font-size-xl); + font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: 1.4; - margin: 0 0 var(--spacing-lg) 0; + margin: 0 0 var(--spacing-md) 0; display: flex; align-items: center; gap: var(--spacing-sm); padding-bottom: var(--spacing-sm); border-bottom: 2px solid var(--glass-border); + word-break: break-word; } .settings-title:not(:first-child) { @@ -1982,7 +1975,7 @@ input { } .setting-group { - margin-bottom: var(--spacing-lg); + margin-bottom: var(--spacing-md); } .setting-label { @@ -2093,8 +2086,8 @@ input { .setting-select { width: 100%; - height: 48px; - padding: 12px 16px; + height: 42px; + padding: 10px 14px; border: 2px solid var(--glass-border); border-radius: var(--border-radius); -webkit-appearance: none; @@ -2134,6 +2127,7 @@ input { .settings-actions { display: flex; + flex-wrap: wrap; gap: var(--spacing-sm); margin-top: var(--spacing-md); padding-top: var(--spacing-md); @@ -2144,18 +2138,30 @@ input { .btn-refresh-devices, .btn-save-chat, .btn-clear-chat { - flex: 1; - padding: 12px 18px; + flex: 1 1 auto; + min-width: 0; + padding: 10px 14px; border: 2px solid transparent; border-radius: var(--border-radius); - font-size: var(--font-size-base); + font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); cursor: pointer; transition: all var(--transition-base); display: flex; align-items: center; justify-content: center; - gap: var(--spacing-sm); + gap: var(--spacing-xs); + white-space: nowrap; + overflow: hidden; +} + +.btn-test-devices span, +.btn-refresh-devices span, +.btn-save-chat span, +.btn-clear-chat span { + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; } .btn-test-devices, @@ -2220,28 +2226,23 @@ input { .sidebar-tabs { flex: 1; - justify-content: space-between; + justify-content: flex-start; + gap: 6px; overflow: hidden; } .sidebar-tab { - flex: 1 1 0; - min-width: 0; - text-align: center; - padding: 8px 8px; - font-size: 0.8rem; - gap: 4px; + flex: 0 0 auto; + padding: 8px 12px; + font-size: 1rem; } .sidebar-tab span { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + display: none; } .sidebar-tab i { - font-size: 0.9rem; + font-size: 1rem; } .chat-messages { diff --git a/tmp b/tmp new file mode 100644 index 0000000..02d7b5b --- /dev/null +++ b/tmp @@ -0,0 +1 @@ +Reload the app in your browser to see Bootstrap tooltips on the sidebar tabs (bottom placement, i18n supported). No further code changes needed.