From b8dc93f893cf435d0871371b02049ef0ba89c7d2 Mon Sep 17 00:00:00 2001
From: Linty <lintydev@gmail.com>
Date: Wed, 29 Apr 2026 15:17:28 +0200
Subject: [PATCH] (cp 919673234) fixes #2478 add created_on tooltip and
 responsive tooltip styles

JS: add mouseenter handler to toggle a tooltip-flip class for elements with data-tooltip so tooltips flip when they would overflow the right edge; set data-tooltip on API creation timestamp. CSS: constrain tooltip max width to 250px (or viewport margin), allow multiline content (max-content/word-wrap), and position flipped tooltips from the right. These changes prevent tooltip overflow on narrow viewports and improve readability.
---
 themes/standard_pages/js/profile.js | 11 +++++++++--
 themes/standard_pages/theme.css     | 10 +++++++++-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/themes/standard_pages/js/profile.js b/themes/standard_pages/js/profile.js
index 647efe108..231507792 100644
--- a/themes/standard_pages/js/profile.js
+++ b/themes/standard_pages/js/profile.js
@@ -181,7 +181,14 @@ $(function() {
   $('#api_expiration_date').on('change', function() {
     $('#error_api_key_date').hide();
   });
-  
+
+  $(document).on('mouseenter', '[data-tooltip]', function() {
+    const rect = this.getBoundingClientRect();
+    const tooltipMaxWidth = 250;
+    const margin = 10;
+    $(this).toggleClass('tooltip-flip', rect.left + tooltipMaxWidth + margin > window.innerWidth);
+  });
+
   getAllApiKeys();
 });
 
@@ -265,7 +272,7 @@ function AddApiLine(lines, reset) {
     api_line.attr('id', `api_${tmp_id}`);
     api_line.find('.icon-collapse').data('api', tmp_id);
     api_line.find('.api_name').text(line.apikey_name).attr('title', line.apikey_name);
-    api_line.find('.api_creation').text(line.created_on_format);
+    api_line.find('.api_creation').text(line.created_on_format).attr('data-tooltip', line.created_on_format);
     api_line.find('.api_last_use').text(line.last_used_on_since).attr('title', line.last_used_on_since);
     api_line.find('.api_expiration').text(line.expiration);
     api_line.find('.api-icon-action').attr('data-api', `api_${tmp_id}`);
diff --git a/themes/standard_pages/theme.css b/themes/standard_pages/theme.css
index 250daf093..052b1b39d 100644
--- a/themes/standard_pages/theme.css
+++ b/themes/standard_pages/theme.css
@@ -835,13 +835,21 @@ input:checked + .slider:before, input:checked + .slider::after {
     animation: fadeIn 100ms cubic-bezier(0.42, 0, 0.62, 1.32) forwards;
     animation-delay: 100ms;
     border-radius: 5px;
-    max-width: 100%;
+    max-width: min(250px, calc(100vw - 20px));
+    width: max-content;
+    white-space: normal;
+    word-wrap: break-word;
     text-align: center;
     font-size: 12px;
     padding: 5px 10px;
     box-shadow: 0px 10px 33px #3333332e;
 }
 
+[data-tooltip].tooltip-flip:hover::after {
+    left: auto;
+    right: 5px;
+}
+
 /*Responsive display*/
 @media only screen and (max-width: 768px) {
   #login-form, #register-form, #password-form, .profile-section{