Improve task manager style

src/css/style.css

@@ -3785,14 +3785,74 @@ label {
 
 .taskmgr {
     box-sizing: border-box;
+    /* could have been avoided with box-sizing: border-box */
+    height: calc(100% - 30px);
+    display: flex;
+    flex-direction: column;
 
     --scale: 2pt;
     --line-color: #6e6e6ebd;
 }
 
-.taskmgr-tasklist {
+.taskmgr * {
+    box-sizing: border-box;
+}
+
+.taskmgr table {
+    border-collapse: collapse;
+}
+
+.taskmgr-taskarea {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
     background-color: rgba(255,255,255,0.8);
     border: 2px inset rgba(127, 127, 127, 0.3);
+    overflow: auto;
+}
+
+.taskmgr-taskarea table thead {
+}
+
+.taskmgr-taskarea table th {
+    -webkit-box-shadow: 0 1px 4px -2px rgba(0,0,0,0.2);
+    box-shadow: 0 1px 4px -2px rgba(0,0,0,0.2);
+    backdrop-filter: blur(2px);
+    position: sticky;
+    z-index: 100;
+    padding: 0;
+    top: 0;
+    background-color: hsla(0, 0%, 100%, 0.8);
+    text-align: left;
+}
+
+.taskmgr-taskarea table th > span {
+    display: inline-block;
+    width: 100%;
+    /* we set borders on this span because */
+    /* borders fly away from sticky headers */
+    border-bottom: 1px solid #e0e0e0;
+
+    /* padding order: top right bottom left */
+    padding:
+        calc(10 * var(--scale))
+        calc(2.5 * var(--scale))
+        calc(5 * var(--scale))
+        calc(2.5 * var(--scale));
+}
+
+.taskmgr-taskarea table th:not(:last-of-type) > span {
+    /* we set borders on this span because */
+    /* borders fly away from sticky headers */
+    border-right: 1px solid #e0e0e0;
+}
+
+.taskmgr-taskarea table td {
+    border-bottom: 1px solid #e0e0e0;
+}
+
+.taskmgr-taskarea table td > span {
+    padding: 0 calc(2.5 * var(--scale));
 }
 
 .taskmgr-indentcell {
@@ -3823,7 +3883,6 @@ label {
 }
 
 .taskmgr-task {
-    border-bottom: 1px solid #e0e0e0;
     display: flex;
     height: calc(10 * var(--scale));
     line-height: calc(10 * var(--scale));