refactor: anchoring manifest title to top

src/App.vue

@@ -466,7 +466,7 @@ export default {
       const treeDom = document.getElementById(this.itemurl);
 
       if (treeDom) {
-        treeDom.scrollIntoView();
+        treeDom.scrollIntoView({ block: 'center' });
       }
 
       // NOTE: Set imageurl to an empty string. Otherwise, if there is no corresponding image,

src/components/tree.vue

@@ -8,6 +8,7 @@
       :nodes="tree"
       :selected-color="$q.dark.isActive ? 'grey' : ''"
       :selected.sync="selected"
+      :style="`max-height:${height}px`"
     >
       <template
         #default-body="{node}"
@@ -53,6 +54,7 @@ export default {
   data() {
     return {
       expanded: [],
+      height: 0,
       selected: null,
       sequenceindex: 0,
     };
@@ -61,6 +63,8 @@ export default {
     this.fasCaretRight = fasCaretRight;
   },
   mounted() {
+    this.handleTreePanelHeight();
+
     // select tree node
     this.selected = treestore.state.selectedItemTree || this.manifests[0].sequence[0].id;
 
@@ -97,6 +101,15 @@ export default {
       }
     });
   },
+  methods: {
+    handleTreePanelHeight() {
+      const el = document.querySelector('.item-content');
+
+      if (el && this.height !== el.clientHeight) {
+        this.height = el.clientHeight;
+      }
+    },
+  },
 };
 </script>
 

src/css/tree.scss

@@ -12,7 +12,7 @@
         background-color: $grey-3;
         left: 0;
         position: sticky;
-        top: 0;
+        top: -8px;
         z-index: 999;
 
         @media (prefers-color-scheme: dark) {
@@ -48,7 +48,6 @@
     word-break: break-all;
     user-select: none;
   }
-
 }
 
 .q-tree {

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-			"entrypoint": "",
+      "entrypoint": "https://ahikar.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
       "annotations": {
         "show": true,
         "types": [