Explicitly closing panel does not show the preview

frontend/src/TaskPanel.svelte

@@ -7,7 +7,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
     // export let tasks: TasksFile;
     let selectedTask: TaskDescriptor | null = null
 
-    let heightClass: "collapsed" | "full" | "preview" = "collapsed"
+    let heightClass: "closed" | "collapsed" | "full" | "preview" = "collapsed"
 
     export function preSelect(task: TaskDescriptor) {
         if (heightClass != "full") {
@@ -30,7 +30,7 @@ import TaskDisplay from "./TaskDisplay.svelte";
     }
 
     function close() {
-        heightClass = "collapsed"
+        heightClass = "closed"
         window.setTimeout(() => window.scrollTo({
             top: 0,
             left: 0,
@@ -54,10 +54,15 @@ import TaskDisplay from "./TaskDisplay.svelte";
             padding: 0 10px 10px 10px;
         }
     }
-
+    /* Used when the panel is explicitly closed - collapsed would still show the hover preview */
+    .panel.closed {
+        display: none;
+    }
+    /* Used when the panel is implicitly closed - it does not disappear when there is mouse over it */
     .panel.collapsed:not(:hover) {
         display: none;
     }
+    /* Used when the user hovers over a node and we want to show that there is something - a small expandable preview */
     .panel.preview, .panel:not(.full):hover {
         height: 100px;
     }
@@ -66,13 +71,13 @@ import TaskDisplay from "./TaskDisplay.svelte";
     }
     .closeButton {
         display: none;
-	position: absolute;
-	right: 0;
-	top: 0;
-	color: white;
-	background-color: red;
-	border: 0;
-	cursor: pointer;
+        position: absolute;
+        right: 0;
+        top: 0;
+        color: white;
+        background-color: red;
+        border: 0;
+        cursor: pointer;
     }
     .closeButton::before {
         content: "X";