fix(client): autocomplete looking off in new tab

Author: eliandoran

apps/client/src/services/note_autocomplete.ts

@@ -327,7 +327,7 @@ function initNoteAutocomplete($el: JQuery<HTMLElement>, options?: Options) {
                         }
                         // Add special class for search-notes action
                         const actionClass = suggestion.action === "search-notes" ? "search-notes-action" : "";
-                        
+
                         // Choose appropriate icon based on action
                         let iconClass = suggestion.icon ?? "bx bx-note";
                         if (suggestion.action === "search-notes") {
@@ -337,18 +337,18 @@ function initNoteAutocomplete($el: JQuery<HTMLElement>, options?: Options) {
                         } else if (suggestion.action === "external-link") {
                             iconClass = "bx bx-link-external";
                         }
-                        
+
                         // Simplified HTML structure without nested divs
                         let html = `<div class="note-suggestion ${actionClass}">`;
-                        html += `<span class="${iconClass}" style="display: inline-block; width: 16px; vertical-align: top;"></span>`;
-                        html += `<span style="display: inline-block; width: calc(100% - 20px); padding-left: 4px;">`;
-                        html += `<span class="search-result-title" style="display: block;">${suggestion.highlightedNotePathTitle}</span>`;
-                        
+                        html += `<span class="icon ${iconClass}"></span>`;
+                        html += `<span class="text">`;
+                        html += `<span class="search-result-title">${suggestion.highlightedNotePathTitle}</span>`;
+
                         // Add attribute snippet inline if available
                         if (suggestion.highlightedAttributeSnippet) {
-                            html += `<span style="display: block; font-size: 0.8em; color: var(--muted-text-color); opacity: 0.6; line-height: 1;" class="search-result-attributes">${suggestion.highlightedAttributeSnippet}</span>`;
+                            html += `<span class="search-result-attributes">${suggestion.highlightedAttributeSnippet}</span>`;
                         }
-                        
+
                         html += `</span>`;
                         html += `</div>`;
                         return html;

apps/client/src/stylesheets/style.css

@@ -862,10 +862,34 @@ table.promoted-attributes-in-tooltip th {
 
 .aa-dropdown-menu .aa-suggestion {
     cursor: pointer;
-    padding: 5px;
+    padding: 6px 16px;
     margin: 0;
 }
 
+.aa-dropdown-menu .aa-suggestion .icon {
+    display: inline-block;
+    line-height: inherit;
+    vertical-align: top;
+}
+
+.aa-dropdown-menu .aa-suggestion .text {
+    display: inline-block;
+    width: calc(100% - 20px);
+    padding-left: 4px;
+}
+
+.aa-dropdown-menu .aa-suggestion .search-result-title {
+    display: block;
+}
+
+.aa-dropdown-menu .aa-suggestion .search-result-attributes {
+    display: block;
+    font-size: 0.8em;
+    color: var(--muted-text-color);
+    opacity: 0.6;
+    line-height: 1;
+}
+
 .aa-dropdown-menu .aa-suggestion p {
     padding: 0;
     margin: 0;
@@ -1828,33 +1852,6 @@ textarea {
     width: 100%;
 }
 
-.jump-to-note-results .aa-dropdown-menu .aa-suggestion {
-    white-space: normal;
-    padding: 2px 12px !important;
-    line-height: 1.1;
-    position: relative;
-    border-radius: 0;
-    margin: 0 !important;
-}
-
-.jump-to-note-results .note-suggestion {
-    margin: 0;
-    padding: 0;
-    line-height: 1;
-}
-
-.jump-to-note-results .aa-suggestion:not(:last-child)::after {
-    display: none; /* Remove dividers for more compact look */
-}
-
-.jump-to-note-results .aa-suggestion:last-child::after {
-    display: none;
-}
-
-.jump-to-note-results .aa-suggestion.disabled::after {
-    display: none;
-}
-
 .jump-to-note-results .aa-dropdown-menu .aa-suggestion:hover,
 .jump-to-note-results .aa-dropdown-menu .aa-cursor {
     background-color: var(--hover-item-background-color, #f8f9fa);

apps/client/src/stylesheets/theme-next/base.css

@@ -536,10 +536,9 @@ body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
 }
 
 /* List item */
-.jump-to-note-dialog .aa-suggestions div,
-.note-detail-empty .aa-suggestions div {
-    border-radius: 0;
-    padding: 12px 16px;
+.jump-to-note-dialog .aa-suggestion,
+.note-detail-empty .aa-suggestion {
+    border-radius: 6px;
     color: var(--menu-text-color);
     cursor: default;
 }