Full suggestion text is shown on hover

The width of the suggestion box is capped at 300 pixels. The full text of a suggestion is shown on hover (doesn't work on mobile).
kiwix · Jan 28, 2025 · e15d872 · e15d872
1 parent 64eb0d1
commit e15d872
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/static/skin/autoComplete/css/autoComplete.css b/static/skin/autoComplete/css/autoComplete.css
@@ -23,7 +23,9 @@
 
 .autoComplete_wrapper > ul {
   position: absolute;
+  min-width: 100%;
   width: fit-content;
+  max-width: 300px;
   max-height: 226px;
   overflow-y: scroll;
   top: 100%;
@@ -61,6 +63,11 @@
   transition: all 0.2s ease;
 }
 
+.autoComplete_wrapper > ul > li > a {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .autoComplete_wrapper > ul > li::selection {
   color: rgba(#ffffff, 0);
   background-color: rgba(#ffffff, 0);

diff --git a/static/skin/viewer.js b/static/skin/viewer.js
@@ -92,7 +92,10 @@ function makeJSLink(jsCodeString, linkText, linkAttr="") {
   // in the JS code we have to URI-encode a second time.
   // (see https://stackoverflow.com/questions/33721510)
   const uriEncodedJSCode = encodeURIComponent(jsCodeString);
-  return `<a ${linkAttr} href="javascript:${uriEncodedJSCode}">${linkText}</a>`;
+  const linkPlainText = htmlDecode(linkText, "text/html");
+  linkAttr += ` href="javascript:${uriEncodedJSCode}"`;
+  linkAttr += ` title="${linkPlainText}"`;
+  return `<a ${linkAttr}>${linkText}</a>`;
 }
 
 function suggestionsApiURL()

diff --git a/test/server.cpp b/test/server.cpp
@@ -57,7 +57,7 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/autoComplete.min.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/autoComplete/autoComplete.min.js?cacheid=1191aaaf" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/autoComplete/css/autoComplete.css" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/autoComplete/css/autoComplete.css?cacheid=85f07174" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/autoComplete/css/autoComplete.css?cacheid=adbe09ed" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/i18n.js" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/i18n.js?cacheid=071abc9a" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/index.css" },
@@ -75,7 +75,7 @@ const ResourceCollection resources200Compressible{
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/taskbar.css" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/taskbar.css?cacheid=80d56607" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/viewer.js" },
-  { STATIC_CONTENT,  "/ROOT%23%3F/skin/viewer.js?cacheid=aca897b0" },
+  { STATIC_CONTENT,  "/ROOT%23%3F/skin/viewer.js?cacheid=8ca16f13" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Poppins.ttf" },
   { STATIC_CONTENT,  "/ROOT%23%3F/skin/fonts/Poppins.ttf?cacheid=af705837" },
   { DYNAMIC_CONTENT, "/ROOT%23%3F/skin/fonts/Roboto.ttf" },
@@ -323,11 +323,11 @@ R"EXPECTEDRESULT(                  <img src="${root}/skin/download-white.svg?cac
       /* url */ "/ROOT%23%3F/viewer",
 R"EXPECTEDRESULT(    <link type="text/css" href="./skin/kiwix.css?cacheid=2158fad9" rel="Stylesheet" />
     <link type="text/css" href="./skin/taskbar.css?cacheid=80d56607" rel="Stylesheet" />
-    <link type="text/css" href="./skin/autoComplete/css/autoComplete.css?cacheid=85f07174" rel="Stylesheet" />
+    <link type="text/css" href="./skin/autoComplete/css/autoComplete.css?cacheid=adbe09ed" rel="Stylesheet" />
     <script type="text/javascript" src="./skin/polyfills.js?cacheid=a0e0343d"></script>
     <script type="module" src="./skin/i18n.js?cacheid=071abc9a" defer></script>
     <script type="text/javascript" src="./skin/languages.js?cacheid=ee7d95b5" defer></script>
-    <script type="text/javascript" src="./skin/viewer.js?cacheid=aca897b0" defer></script>
+    <script type="text/javascript" src="./skin/viewer.js?cacheid=8ca16f13" defer></script>
     <script type="text/javascript" src="./skin/autoComplete/autoComplete.min.js?cacheid=1191aaaf"></script>
       const blankPageUrl = root + "/skin/blank.html?cacheid=6b1fa032";
           <label for="kiwix_button_show_toggle"><img src="./skin/caret.png?cacheid=22b942b4" alt=""></label>