feat(note_tooltip): improve layout for empty notes

Author: eliandoran

Diff for: src/public/app/services/note_tooltip.ts

@@ -140,19 +140,28 @@ async function renderTooltip(note: FNote | null) {
     }
 
     const noteTitleWithPathAsSuffix = await treeService.getNoteTitleWithPathAsSuffix(bestNotePath);
-    let content = "";
-    if (noteTitleWithPathAsSuffix) {
-        content = `<h5 class="note-tooltip-title">${noteTitleWithPathAsSuffix.prop("outerHTML")}</h5>`;
-    }
 
     const { $renderedAttributes } = await attributeRenderer.renderNormalAttributes(note);
 
     const { $renderedContent } = await contentRenderer.getRenderedContent(note, {
         tooltip: true,
         trim: true
     });
+    const isContentEmpty = ($renderedContent[0].innerHTML.length === 0);
 
-    content = `${content}<div class="note-tooltip-attributes">${$renderedAttributes[0].outerHTML}</div>${$renderedContent[0].outerHTML}`;
+    let content = "";
+    if (noteTitleWithPathAsSuffix) {
+        const classes = [ "note-tooltip-title" ];
+        if (isContentEmpty) {
+            classes.push("note-no-content");
+        }
+        content = `<h5 class="${classes.join(" ")}">${noteTitleWithPathAsSuffix.prop("outerHTML")}</h5>`;
+    }
+
+    content = `${content}<div class="note-tooltip-attributes">${$renderedAttributes[0].outerHTML}</div>`;
+    if (!isContentEmpty) {
+        content += $renderedContent[0].outerHTML;
+    }
 
     return content;
 }

Diff for: src/public/stylesheets/theme-next/shell.css

@@ -1206,13 +1206,21 @@ body .calendar-dropdown-widget .calendar-body a:hover {
 
 .note-tooltip-content {
     padding: 8px;
+    min-height: 56px;
 }
 
-.note-tooltip-content .note-title-with-path {
+.note-tooltip-title .note-title-with-path {
     display: flex;
     flex-direction: column-reverse;
-    border-bottom: 2px solid currentColor;
+}
+
+.note-tooltip-title.note-no-content {
+    margin: 0;
+}
+
+.note-tooltip-title:not(.note-no-content) .note-title-with-path {
     padding-bottom: 6px;
+    border-bottom: 2px solid currentColor;
 }
 
 .note-tooltip-content .note-path {