Styling

Author: kishikawakatsumi

Public/css/popover.css

@@ -41,6 +41,10 @@
   white-space: pre-line;
 }
 
+.popover-content .font-monospace {
+  font-family: Menlo, Consolas, "DejaVu Sans Mono", "Ubuntu Mono", monospace !important;
+}
+
 .popover-content .badge {
   margin: 0 8px 0 8px;
   color: #696969;

Public/js/lookup_view.js

@@ -75,9 +75,15 @@ export class LookupView {
               if (item.range) {
                 const range = JSON.parse(item.range);
                 const sourceRange = `${range.startRow}:${range.startColumn} - ${range.endRow}:${range.endColumn}`;
-                return `<dt class="text-truncate" style="max-width: calc(40vw - 20px);"><span class="badge annotation" style="width: auto; text-align: start;">Text</span>${item.title}</dt><dd><div><span class="badge annotation">Range</span>${sourceRange}</div><div><span class="badge annotation">${item.type}</span>${item.content}</div></dd>`;
+                return `<dt class="text-truncate" style="max-width: calc(40vw - 20px);">
+  <span class="badge annotation" style="width: auto; text-align: start;">Text</span><span class="font-monospace">${item.title}</span>
+</dt>
+<dd><div><span class="badge annotation">Range</span>${sourceRange}</div><div><span class="badge annotation">${item.type}</span>${item.content}</div></dd>`;
               } else {
-                return `<dt class="text-truncate" style="max-width: calc(40vw - 20px);"><span class="badge annotation" style="width: auto; text-align: start;">Text</span>${item.title}</dt><dd><div><span class="badge annotation">${item.type}</span>${item.content}</div></dd>`;
+                return `<dt class="text-truncate" style="max-width: calc(40vw - 20px);">
+  <span class="badge annotation" style="width: auto; text-align: start;">Text</span><span class="font-monospace">${item.title}</span>
+</dt>
+<dd><div><span class="badge annotation">${item.type}</span>${item.content}</div></dd>`;
               }
             })
             .join("");